この記事では、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プログラミングに役立つことを願っています。