ブートストラップ4ナビゲーションドロップダウンの問題に複数のドロップダウン

Question

jsfiddle場合：http://jsbin.com/wamunoside/1/edit?html,output

jsfiddle 

これは、ブートストラップ4ドキュメントサイトに与えられた例から取られる： ちょうど第一のドロップダウンの下に、この例に第二のドロップダウンを追加しますここで見つける：それはメニューFOを表示されるように

1）出力タブの幅を減らす： https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown

のでjsfiddleでは、これはあなたが問題を起こす方法ですrモバイル（991px以下）

2.）2つの 'ドロップダウンリンク'が表示され、上部の1つをクリックするとサブメニューが展開されます。

3.現在展開されている他の 'ドロップダウンリンク'をクリックします。

両方のドロップダウンが閉じていることに注意してください - 2番目のドロップダウンを開いたはずです。

Answer 1

はevent.type == "mouseleave"場合、私は次のように追加 ...私のコードであることの問題を終わったし、それが合理的に問題を修正しているようだ、（デスクトップ用）はまだ完璧ではない：

http://jsbin.com/yiyohatequ/edit?html,css,js,output

私は」基本的にドロップダウンメニューが表示される最善の方法で苦労しています'ホバーオン'デスクトップとドロップダウンが表示される'クリックすると'タブレット/モバイル用。だから私はこのコードを1位に書いたのです。

/* Prevent more than 1 dropdown showing up at once*/ 
$('.nav-link').hover(function (event) { 
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave" 
if (event.type == "mouseleave") { 
    var hovered = this.nextElementSibling;//.dropdown-menu 
    var navdropdowns = $('.dropdown-menu'); 
    navdropdowns.each(function (a, b) { 
     if (hovered != b) { 
      $(b).removeClass('show'); 
     } 
    }); 
} 
})