Как скрыть рассылку Twitter-бутстрапа

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

enter image description here


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

Когда элемент щелкнут, я попытался сделать это:

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

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

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


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

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

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

Ответ 1

Попробуйте следующее:

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

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

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

Ответ 2

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

поэтому я делаю это с помощью $("body").trigger("click")

Ответ 3

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

Ответ 4

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

Сделал это для меня.

Ответ 5

Это можно сделать без написания кода 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>

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

1) Первая загрузка hover намерения javascript

Ссылка здесь: Hover-намерение 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);

    });

Ответ 9

Попробуйте открыть 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>

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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

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

ИЛИ

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

Он всегда работает для меня.

Ответ 13

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

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

Где "this" - глобальный контейнер группы кнопок.

Ответ 14

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

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

Ответ 15

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

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

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

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

Ответ 16

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

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

Ответ 17

После нажатия:

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

Ответ 18

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

Ответ 19

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

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

Ответ 20

Простой способ:

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

Ответ 21

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

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