Как скрыть раскрывающийся список Twitter Bootstrap

Это начинает раздражать - когда я нажимаю на элемент в раскрывающемся списке Bootstrap, раскрывающийся список не закрывается. Я настроил его для открытия лайтбокса Facebox, когда вы щелкаете раскрывающийся элемент, но с этим есть проблема.

Что я пробовал

При нажатии на элемент я пытался сделать это:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

Это скрывает его, но потом по какой-то причине он больше не открывается.

Как видите, мне действительно нужно закрыть раскрывающийся список, потому что он выглядит ужасно, когда остается открытым (в основном потому, z-indexчто раскрывающийся список находится выше, чем наложение модального окна Facebox.

Почему я не использую встроенное модальное окно Bootstrap

Если вам интересно, почему я не использую красивое модальное окно, встроенное в Bootstrap , это потому, что:

1. У него нет возможности загружать в него контент с помощью AJAX.
2. Вам нужно каждый раз вводить HTML для модального окна; с Facebox вы можете сделать простые:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Он использует анимацию CSS3 для анимации (что выглядит очень красиво), но в браузерах, отличных от CSS3, она просто отображается, что выглядит не очень хорошо; Facebox использует JavaScript для постепенного появления, поэтому он работает во всех браузерах.

Попробуй это:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

Это также может сработать для вас:

$('[data-toggle="dropdown"]').parent().removeClass('open');

попробовал большинство вариантов отсюда, но ни один из них не помог мне. ( $('.dropdown.open').removeClass('open');значок скрыл это, но если вы навели курсор мыши, прежде чем щелкнуть что-либо еще, он снова появится.

так что я решил сделать это с $("body").trigger("click")

$('.open').removeClass('open');

Bootstrap 4 (октябрь 2018 г.):

$('.show').removeClass('show');

Вам нужно только $('.dropdown.open').removeClass('open');удалить вторую строку, которая скрывает раскрывающееся меню.

Это можно сделать без написания кода JavaScript, добавив атрибут data-toggle = "dropdown" в тег привязки, как показано ниже:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

Вот что сработало для меня:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Выбранный ответ не сработал для меня, но я думаю, что это из-за более новой версии Bootstrap. В итоге я написал это:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Надеюсь, это поможет кому-то еще в будущем.

Попробуй это!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

ИЛИ

$(clicked_element).trigger("click");

У меня всегда получается.

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

1) Сначала загрузите javascript с намерением наведения

Ссылка здесь: Javascript с намерением наведения

2) Вот мой код для выполнения

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

$('.dropdown.open').removeClass('open');

Прочитав документацию и используя JavaScript, это можно сделать с помощью метода переключения:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

Вы можете прочитать об этом здесь: http://getbootstrap.com/javascript/#dropdowns-methods

Попробуйте открыть HTML с помощью Bootstrap Modal, я использую этот код:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

и ссылка такая:

<a href="#my_page" data-toggle="modal">PAGE</a>

Вот мое решение о том, как закрыть раскрывающееся меню кнопки и переключить кнопку:

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

Где «это» - глобальный контейнер группы кнопок.

Bootstrap 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

это сработало для меня, у меня была панель навигации и несколько выпадающих меню.

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Самый простой способ сделать это: добавить метку скрытия:

<label class="hide_dropdown" display='hide'></label>

затем каждый раз, когда вы хотите скрыть раскрывающийся список, вы вызываете:

$(".hide_dropdown").trigger('click');

Не знаю, поможет ли это кому-нибудь (возможно, это слишком специфично для моего случая, а не для этого вопроса), но для меня это сработало:

$('.input-group.open').removeClass('open');

После щелчка:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Используйте class = "dropdown-toggle" в теге привязки, тогда, когда вы щелкнете по тегу привязки, он закроет раскрывающийся список начальной загрузки.

Эй, этот простой трюк с jQuery должен помочь.

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Самый простой способ:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

вы можете использовать этот код в своем текущем обработчике событий

$('.in,.open').removeClass('in open');

в моем сценарии я использовал после завершения вызова ajax

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Выбор по атрибуту - медленный путь. Вот самое быстрое решение, чтобы скрыть раскрывающийся список:

$(".dropdown-menu.show").parent().dropdown("toggle");

или используйте следующее, если .dropdown-menu не является следующим дочерним элементом (найдите ближайший родительский выпадающий элемент управления):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Возможно, он был добавлен ретроспективно (хотя эта функция не задокументирована даже в Bootstrap 4.3.1), но вы можете просто вызвать ее с hideпараметром. Просто не забудьте вызвать его на элементе переключателя. Вот так:

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

Конечно, это работает и наоборот show.