web-dev-qa-db-ja.com

Bootstrapドロップダウンがクリックで閉じないようにする

私のメニューではBootstrap 3を使用していますが、ドロップダウンがクリックで閉じないようにすることはできません。どうすればよいですか？

JSFiddle

 // Add open class if active
  $('.sidebar-nav').find('li.dropdown.active').addClass('open');

  // Open submenu if active
  $('.sidebar-nav').find('li.dropdown.open ul').css("display","block");

  // Change active menu
  $(".sidebar-nav > li").click(function(){
    $(".sidebar-nav > li").removeClass("active");
    $(this).addClass("active");
  });

  // Add open animation
  $('.dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add close animation
  $('.dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });
javascripttwitter-bootstrapdrop-down-menujsfiddle
11
Kasara

イベントがDOMツリーを泡立たせないようにする必要があります。

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation イベントがBootstrap hiding menuによって最終的に処理されるノードに到達するのを防ぎます。

デモ： http://jsfiddle.net/wkc5md23/3/

39
dfsq

クリックイベントの伝播を停止すると、開発の後半で問題が発生する場合があるため、これはより適切な解決策であると思います。詳しくはこちらをご覧ください： http://css-tricks.com/dangers-stopping-event-propagation/ 代わりに、このソリューションはBootstrapでの伝播を停止しますhide（hide.bs.dropdown）イベント。これにより、hidden（hidden.bs.dropdown）イベント。

次のコードは、最初にここから取得したため、Bootstrapドロップダウンすべてで機能するように自分で取得して編集しました： bootstrapドロップダウンがクリックで閉じないようにする 私はこの方法も個人的に好んでいます。これは、組み込みのBootstrapドロップダウンイベントを使用するためです。 https://getbootstrap.com/docs/3.4/javascript/にあります。 ＃dropdowns-events 。

  $(function() {
      $('.dropdown').on({
          "click": function(event) {
            if ($(event.target).closest('.dropdown-toggle').length) {
              $(this).data('closable', true);
            } else {
              $(this).data('closable', false);
            }
          },
          "hide.bs.dropdown": function(event) {
            hide = $(this).data('closable');
            $(this).data('closable', true);
            return hide;
          }
      });
  });
23
yaharga

サイドメニューをクリックして閉じない

$(function() {
var closeble = false;
$('body').on('click', function (e) {
    if (!$(event.target).is("a.dropdown-toggle")) {
        closeble = false;
    }

});
$('.dropdown').on({
    "click": function(event) {
        if ($(event.target).closest('.dropdown-toggle').length) {
            closeble = true;
        } else {
            closeble = false;
        }
    },
    "hide.bs.dropdown": function() {
        return closeble;
    }
});

}）;

1
julioalberto64

ドロップダウン機能を一時的に無効にすることができます。これは回避策です。

ドロップダウン「メニュー」内に入力フィールドがある例：

    //for dropdown field not closing when clicking on inputfield
    $(document).on('focus', 'input', function(e) {

  // this attribute can be anything except "dropdown", you can leave it blank 
      $('#yourDropdownID').attr('data-toggle','off'); 

    });

    //for dropdown field back to normal when not on inputfield
    $(document).on('focusout', 'input', function(e) {

      $('#yourDropdownID').attr('data-toggle','dropdown');

    });

これはクリック可能なあらゆるものに使用でき、クリックしたアイテムがドロップダウンメニューを閉じるか閉じないかを個別に定義できます。

0
Balogh Mihály