この記事では、JSシミュレーションブートストラップドロップダウンメニューの効果について説明します。次のように、参照のために共有してください。
ブートストラップドロップダウンメニューをシミュレートします
作業の効果を削減するには：ナビゲーションバーをクリックすると、次のメニューが表示されますが、他の場所をクリックすると、サブメニューが非表示になります。
ブートストラップサブメニューのスタイルはデザインとは異なるため、自分で同様の効果を書く必要があります。
コントロールがクリックされると、ドロップダウンメニューが表示されます。しかし、空白の場所をクリックすると、どのように自動的に非表示にできますか？
最初は、オンクリックイベントを体に縛り付けました。空白の場所をクリックすると、イベントの泡立ちによりクリックボディイベントがトリガーされます。ただし、問題は、コントロールをクリックすると、ボディクリックイベントもトリガーされ、ドロップダウンメニューが表示された後に撤回されるため、このアイデアは間違っています。
Bootstrapがこの関数を実装しているため、ソースコードを確認し、解決策を見つけました。
ドキュメントをバインドし（そのサブメニューを非表示）、メソッドをトリガーするときにコントロールが泡立つのを防ぎ、結合のトリガーを防ぎます。
<！ - ナビゲーションバーのフィルター - > <div style = "z-index：999"> <div> <span onclick = "showorhideitem（this、event）"> category <span> </span> </span> <ul data-show = "hide" style = "z-index：999;"> <li onclick = " <span> housekeeping </span> <span></span> <span> </span> </li> <li onclick = "jumpto（this）"ターゲット= "https://www.baidu.com"> <span>野菜</span> <span></span> </span> <ターゲット= "https://www.baidu.com"> <span>スナック</span> <span> </span> <span> </span> </li> </ul> </div> </div> <div> <div> style = "top：100％; left：0px; z-index：999; display：none"> <li onclick = "jumpto（this）"ターゲット= "https://www.baidu.com"> <span> housekeeping1 </span> <span></span> </span> </li onclick = "Jumptoターゲット= "https://www.baidu.com"> <span> gegetable1 </span> <span> </span> <span> </span> </span> </li> <li onclick = "jumpto（this）"ターゲット= "https://www.baidu.com </ul> </div> </div> <div> <div onclick = "showsearch（this、event）"> <span></span> </div> <！ - show search box-> <div> <div style = "top：58％; right：0px; z-index：999; display：none;" data-search = "hide"> <div> <div> <div style = "margin-right：80px;"> <span style = "left：0px; top：0px;"></span> <入力プレースホルダー= "search" onclick = "stopevent（this、event）" type = "text" value = "" 12px; ">検索</button> </div> </div> </div> </div> </div> </div> </div> </div> <script> $（function（）{//イベント$（document）。 $（ "ulshow = 'show']）。slideup（" slow "）; $（ "div [data-search = 'show']"）。css（ "display"、 "none"）。 var $ currentobj = $（obj）; //すべてのドロップダウンリストを非表示$（ "ul [data-show = 'show']"）。hide（）; //すべてのアクティブなクラスをクリア$ currentobj.closest（ "。row"）。 //選択されたスタイルを追加します$ currentobj.closest（ "。float_left"）。addclass（ "active"）var $ ul = $ culernobj.closest（ "div"）。find（ "ul"）; // ulは拡張状態です。 $ ul.attr（ "data-show"、 "hide"）; } else {// ulは拡張された状態$ ul.slidedown（ "slow"）; $ ul.attr（ "data-show"、 "show"）; //イベントバブルイベントevent.stoppropagation（）を停止します。 }} //検索ボックス関数を表示shosearch（obj、event）{var $ currentobj = $（obj）.closest（ "。float_left"）。find（ "。search_cont"）。 $ currentobj.anime（{width： "100％"}、1000）; $ currentobj.attr（ "data-search"、 "show"）; //停止バブルイベントevent.stoppropagation（）;} function stopevent（obj、event）{//イベントbubbles event.stoppropagation（）;} </script>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。