Запретить выпадающее меню 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();
  });

ОТВЕТЫ

Ответ 1

Вам нужно остановить событие от пузырьков дерева DOM:

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

event.stopPropagation предотвращает событие до достижения node, где он в конечном итоге обрабатывается меню скрытия Bootstrap.

Демо: http://jsfiddle.net/wkc5md23/3/

Ответ 2

Я считаю, что это должно быть более правильным решением, так как остановка распространения по событию click может иногда вызывать проблемы на более поздних этапах разработки. Вы можете прочитать больше об этом здесь: http://css-tricks.com/dangers-stopping-event-propagation/ Вместо этого это решение останавливает распространение в событии Bootstrap hide (hide.bs.dropdown), что останавливает его переход к скрытому (hidden.bs.dropdown) событие.

Следующий код был взят и отредактирован мной для того, чтобы он работал во всех раскрывающихся списках 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;
          }
      });
  });

Ответ 3

Не закрыть в боковом меню щелчка

$(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;
    }
});

});

Ответ 4

Вы можете временно отключить функциональность выпадающего меню. Это обходное решение.

Пример с полем ввода внутри раскрывающегося "меню":

    //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');

    });

Это можно использовать для всего, что можно щелкнуть, и вы можете индивидуально определить, какие элементы нажали, закрыть или не закрыть раскрывающееся меню.