この記事では、参照用のブートストラップドロップダウンモジュールドロップダウンの使用を紹介します。特定のコンテンツは次のとおりです
1。ソースコード分析：
Dropdowns.scss：ドロップダウンボックスモジュール
JavaScripts/bootstrap/dropdown.js：ドロップダウンボックス応答を実装します
2。機能と原則：
[プルダウン]タブでは、選択したアイテムを表示する機能は、デフォルトでは実現できません。
原理：
1.ドロップダウンクラスをアンカーポイントとして使用してから、Child List Dropdown-Menuを絶対に配置させます。また、Associationを作成するには、Data-Toggle = "Dropdown"の設定としてクリックポイントを追加する必要があります。
2。JSプラグインからサポートが必要です
3。ソースコード分析：
1。CARET：境界線を使用して実装して、下向きの三角形を実装します
1.1。境界線の色は、デフォルトではフォントの色です
1.2。三角形の実装：境界には幅が必要であり、隣接する側には幅が必要ですが、色は透明です。最後に、要素は、高さと幅0にするために、行のブロック要素である必要があります。
1.3。コードは次のとおりです
コードコピーは次のとおりです。<Span style = "border-left：4px solid; border-top：4px solid透明、ボーダーボトム：4px固体透明、高さ：0px;幅：0px; line-height：normor; display：inline-block;"> </span>
2.クリックイベントのリスニングタイプはドキュメントにバインドされ、リスニングタイプはdata-toggle = "ドロップダウン"です。
3. JSプラグインとクラスコンストラクターによって記述されたプラグイン機能は、JSメソッドを使用してプラグインを呼び出すために使用されます。
4.データ - *モードは、イベントをドキュメントに挿入するために使用されるプラグインを呼び出します。コードは次のとおりです。
$（document）.on（ 'click.bs.dropdown.data-api'、clearmenus）.on（ 'click.bs.dropdown.data-api'、 '.dropdown form'、function（e）{e.stoppropagation（）}）。 dropdown.prototype.toggle）.on（ 'keydown.bs.dropdown.data-api'、トグル、ドロップダウン.prototype.keydown）.on（ 'keydown.bs.dropdown.data-api'、 '。コードは、ドロップダウンによって定義されたメソッドを直接呼び出します。ここでの素晴らしいデザインは、プラグインフレームワーク、データの呼び出し、*モードの呼び出し、JSプラグインモードの呼び出しにありますが、これら2つの呼び出しモードは同じコードを使用します。
5. JSプラグインでそれを呼び出す場合、基本的な方法を自分で呼び出す必要があります。インスタンスを作成すると、トグルイベントのみがバインドされます。
var dropdown = function（element）{$（element）.on（ 'click.bs.dropdown'、this.toggle）}6。clearmenu：data-toggle = "ドロップダウン"の要素のみがクリアされます
7。ドロップダウンバックドロップ：クリックなしのイベントの処理を移動するために使用されます
8。キーダウン：ドロップダウンボタンがフォーカスを取得したら、キーを押して展開し、上部キーを押して収縮します。
9。Data-Target and Herf = "＃id"：クリックを達成するには、指定されたドロップダウンリストを展開します。デフォルトは、ボタンの後ろの兄弟ノードを展開することです。
<ul> <li> <a> index </a> </li> <li> <a> zhenglu </a> </li> <li> <a data-toggle = "dropdown" href = "＃name">ユーザーツール</a> </li> </ul> <div id = "name"> <ul> <a>
10。ポップアップサブメニューを実装し、ボトム：100％（ボトムポップアップサブメニューの位置決め）を使用して実装します
11。アプリケーションの例
<div id = "dropdown"> <a id = "dropdown-btn" data-target = "＃dropdown">番号</a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div>
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。