ブートストラップドロップダウンメニューの章では、ドロップダウンメニューについて説明しますが、相互作用の部分は含まれません。この章では、ドロップダウンメニューの相互作用について詳しく説明します。ドロップダウンプラグインを使用して、ドロップダウンメニューを任意のコンポーネント（ナビゲーションバー、タブ、カプセルナビゲーションメニュー、ボタンなど）に追加できます。
プラグインの機能を個別に参照する場合は、DropDown.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
ドロップダウンメニュー（ドロップダウン）プラグインの非表示コンテンツを切り替えることができます。
1。データ属性を使用します：データ-toggle = "ドロップダウン"をリンクまたはボタンに追加して、下に示すようにドロップダウンメニューを切り替えます。
<div> <a data-toggle = "dropdown" href = "＃">ドロップダウントリガー</a> <ul role = "menu" aria-labelledby = "dlabel"> ... </ul> </div>
リンクをそのままにしておく必要がある場合（ブラウザがJavaScriptを有効にしない場合に役立つ）、href = "＃"の代わりにデータターゲットプロパティを使用します。
<div> <a id = "dlabel" role = "button" data-toggle = "dropdown" data-target = "＃" href = "/page.html">ドロップダウンメニュー（ドロップダウン）<span> </span> </a> <ul chole = "メニュー" aria-labelledby = "dlabel"> ...
2。JavaScriptを介して：JavaScriptを切り替えるには、次の方法を使用してください。
$（ '。ドロップダウントグル'）。ドロップダウン（）
2。ドロップダウンメニューの簡単な例
一般に使用すると、コードはコンポーネントメソッドと同じです。
//宣言的使用法<div> <ボタンData-toggle = "Dropdown">ドロップダウンメニュー<span> </span> </button> <ul> <li> <a href = "＃"> home </a> </li> <li> href = "＃"> bout </a> </li> </ul> </div>
宣言的使用法の重要なコア：
1.末梢容器にパッケージを使用します。
2。内部クリックボタンイベントのバインディングデータ-toggle = "ドロップダウン"。
3.メニュー要素を使用します。
//ボタンがコンテナの外側にある場合、データターゲットを介してバインドできます。 <button id = "btn" data-toggle = "dropdown" data-target = "＃dropdown"> javascriptコールでは、プロパティがなく、メソッドは使いやすくありません。以下は4つの基本的なイベントです。 //メニューメソッドをドロップダウンしますが、それでもデータが必要です - *$（ '＃btn'）。ドロップダウン（）; $（ '＃btn'）。ドロップダウン（ 'トグル'）;
ドロップダウンメニューは、ポップアップの前、ポップアップ後、閉じる前、閉じた後の4種類のイベントをサポートします。
//イベント、その他の同様の$（ '＃dropdown'）。
3。タブページのドロップダウンメニューの使用
<！Doctype html> <html> <head> <title> bootstrapインスタンス - ドロップダウンメニュー付きタグページ</title> <link href = "/css/bootstrap.min.css src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p>ドロップダウンメニュー付きタグページhref = "＃"> ios </a> </li> <li> <a href = "＃"> vb.net </a> </li> <li> <a data-toggle = "ドロップダウン" href = "＃"> java href = "＃"> jmeter </a> </li> <li> <a href = "＃"> ejb </a> </li> <li> <a href = "＃">署名されたリンク</a> </li> </li> <li> <a href = "＃"
複製画像：
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。