ブートストラップ ソース コード分析dropdown_html/css_WEB-ITnose

ソースコード分析:

Dropdowns.scss: ドロップダウン ボックス モジュール
Javascripts/bootstrap/dropdown.js: ドロップダウン ボックスの応答を実装

実装の機能と原則:

ドロップダウン タブ、選択された項目の表示はデフォルトでは実装できません 関数

原則:

1. ドロップダウン クラスをアンカー ポイントとして使用し、子リストのドロップダウン メニューの絶対位置を実装する必要もあります。 data-toggle="dropdown" を設定して関連付けを行います。
2. js プラグインのサポートが必要です

ソースコード分析:

1. 境界線を使用して実現されます
1.1. 境界線の色はデフォルトでフォントの色になります
1.2.三角形の実装: 境界線には幅が必要で、次に隣接する 2 つの辺にも幅が必要ですが、色は透明です。最後に、要素は高さと幅を 0 にするためにインライン ブロック要素である必要があります。
1.3. コードは次のとおりです

<span style="border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; height: 0px; width: 0px; line-height: normal; display: inline-block; "></span>

2. click イベントのリスナーがドキュメントにバインドされており、リスナーのタイプは data-toggle="dropdown" です。
3. JS プラグインによって記述されたプラグイン関数とクラスのコンストラクターは、JS モードでプラグインを呼び出すために使用されます。
4. data-* モード呼び出しプラグインは、ドキュメントにイベントを挿入することによって実装されます。コードは次のとおりです:

$(document).on('click.bs.dropdown.data-api', clearMenus).on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }).on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle).on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown).on('keydown.bs.dropdown.data-api','.dropdown-menu',Dropdown.prototype.keydown)

このコードは、Dropdown によって定義されたメソッドを直接呼び出します。ここでの素晴らしい設計は、data-* モードの呼び出しと Js プラグイン モードの呼び出しにあります。ただし、これら 2 つの呼び出しモードは同じコードを使用します。
5. Js プラグインを使用して呼び出す場合は、インスタンスを作成するときに基本メソッドを呼び出す必要があります。

6. clearMenu: data-toggle="dropdown" を持つ要素のみがクリアされます。 8. keydown: ドロップダウン ボタンがフォーカスされたときに、モバイルのクリック イベントを処理します。キーを押して展開し、上キーを押して機能を縮小します

9、data-target および herf="#id": 指定されたドロップダウン リストをクリックして展開することを実現します。デフォルトでは、兄弟ノードが展開されます。ボタンの後ろ:

var Dropdown = function (element) {  $(element).on('click.bs.dropdown', this.toggle)}

10. ポップアップ サブメニューを実現するには、bottom:100% (ポップアップ サブメニューの下部の位置) を使用して

11 を実現します。