Як приховати випадаюче меню Bootstrap Twitter

Це стає дратує - коли я натискаю на елемент у спадному меню 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');

Це можна зробити без написання коду 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>

Вам потрібно лише $('.dropdown.open').removeClass('open');видалити другий рядок, який приховує спадне меню.

Це те, що мені вдалося:

$(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.