web-dev-qa-db-ja.com

BootStrap3は、アイテムをクリックした後、ドロップダウンメニューを開いたままにします

優れたドロップダウンメニューを備えたbootstrap3.0を使用しています。

ドロップダウンメニューの外側をクリックすると、メニューが消えますが、これはまったく正しいです。

しかし、ドロップダウンメニューの項目をクリックすると、同様に消えます。これは私が思うにそうではなく、トグル動作を制御できるオプションはありません。 （Facebookの通知メニューのように、アイテムをクリックしたときにメニューを開いたままにしておく必要があります）

ブートストラップのソースを変更する必要があると思いますが、それは本当にしたくないです。そのため、ソースに触れる前に、回避策がありますか？そうでない場合、ブートストラップの影響を最小限に抑えるためにソースを変更する方法は？

アイデアをありがとう。

twitter-bootstraptwitter-bootstrap-3drop-down-menu
24
Hetfield Joe

クリック後にドロップダウンを開いたままにする方法の1つを次に示します...

$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});

デモ： http://www.bootply.com/11635

別のオプションは、クリックイベントを次のように処理することです。

$('#myDropdown .dropdown-menu').on({
    "click":function(e){
      e.stopPropagation();
    }
});

デモ： http://www.bootply.com/116581

52
Zim

受け入れられた答えは非常に役立ちます。特定の項目のみがクリックされたときにドロップダウンメニューを開いたままにする場合、別の観点を提供したいと思います。

// A utility for keeping a Bootstrap drop down menu open after a link is
// clicked
//
// Usage:
//
//   <div class="dropdown">
//     <a href="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
//       Dropdown trigger <span class="caret"></span>
//     </a>
//
//     <ul class="dropdown-menu" aria-labelledby="dLabel">
//       <li><a href="">Edit</a></li>
//       <li><a href="" keep-menu-open="true">Delete</a></li>
//     </ul>
//  </div>

$(".dropdown .dropdown-menu a").on("click", function(e) {
  var keepMenuOpen = $(this).data("keep-menu-open"),
      $dropdown = $(this).parents(".dropdown");

  $dropdown.data("keep-menu-open", keepMenuOpen);
});

$(".dropdown").on("hide.bs.dropdown", function(e) {
  var keepMenuOpen = $(this).data("keep-menu-open");

  $(this).removeData("keep-menu-open");

  return keepMenuOpen !== true;
});
6
Strika

バニラJSで

document.getElementById('myDropdown').addEventListener('click', function (event) {
    event.stopPropagation();
  });
4
Enda Molloy