Jquery 如何隐藏Twitter引导下拉列表

这让人恼火——当我在引导下拉列表中单击某个项目时，下拉列表不会关闭。我已经设置好在单击下拉项时打开一个Facebox lightbox，但它有一个问题

---

我试过的 单击项目时，我尝试执行以下操作：

    $('.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淡入，所以它可以在所有浏览器中工作

试试这个：

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

这可能也适用于您：

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

---

尝试使用引导模式打开HTML，我使用以下代码：

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

---

这对我很有效，我有一个导航栏和几个下拉菜单

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

---

为什么要使用我的方法，因为如果用户离开div，这个方法允许用户在子菜单消失之前有一定的延迟，就像使用superfish插件一样

1） 首先下载hover-intent 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);

    });

---

选择的答案对我不起作用，但我认为这是因为Bootstrap的更新版本。我最后写了这样一篇文章：

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

---

希望这对将来的其他人有帮助。

您只需要执行

$（'.dropdown.open'）。removeClass（'open'）删除隐藏下拉菜单的第二行。
尝试了这里的大多数选项，但没有一个真正适合我。（
$（'.dropdown.open'）.removeClass（'open'）；
确实隐藏了它，但是如果在单击任何其他内容之前将鼠标移到上面，它会再次显示

因此，我用
$（“body”）。触发器（“click”）
以下是我关于如何关闭按钮下拉列表并切换按钮的解决方案：

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

其中“this”是按钮组的全局容器。
最简单的方法是：添加隐藏标签：

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

不知道这是否对任何人都有帮助（也许这对我的情况来说太具体了，而不是这个问题），但对我来说，这很有效：

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

Bootstrap 4（2018年10月）：

通过在锚定标记中添加属性data toggle=“dropdown”，无需编写JavaScript代码即可完成此操作，如下所示：



下拉列表




单击后：

// 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”，然后当您单击锚定标记时，它将关闭引导下拉列表。
这就是我的工作原理：

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

嘿，这个简单的jQuery技巧应该会有所帮助

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

阅读文档并使用JavaScript可以使用切换方法完成：

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

您可以在以下网站上阅读：
试试这个

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

或

它总是对我有用。
最简单的方式：

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

引导程序4.1：

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

按属性选择是一种缓慢的方式。以下是隐藏打开的下拉列表的最快解决方案：

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

或者，如果.dropdown菜单不是下一个子元素（查找最近的父下拉控件），请使用以下命令：

它可能是在retrospect中添加的（不过，即使在Bootstrap 4.3.1中，该功能也没有添加），但您只需使用
hide
参数调用它即可。只需确保在toggler元素上调用它即可。如下所示：

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

当然，这也与
show
相反。我添加了另一种可能适用于您的方法。如果不适用，请仔细检查保存按钮的div.btn-group元素是否分配了类“open”。
.dropdown（'toggle'））
关闭下拉列表，但也禁止它再次打开！我不知道这有什么用！当我使用.dropdown（'toggle'）时，附加到下拉列表中项目的其他单击处理程序停止工作。当我使用.parent（）.removeClass（'open'）时，我没有这个问题方法：删除
open
类是可行的，但它不会更新
aria expanded
。如果可能，最好使用API。
$（'.dropdown.open.dropdown toggle'）。dropdown（'toggle'）；
将在独立的下拉按钮上工作，使它也适用于可以执行的下拉按钮和按钮组
$（'.open>.dropdown toggle'）。dropdown（'toggle'）；
这也是一种很好的方法！因此，当您实际单击
时，它会关闭下拉列表？是的，下拉列表列出了菜单外用户的单击事件。：）@VeXii是的，这就是它没有关闭移动设备的原因。希望新的引导版本3（“移动优先”）修复了这个问题。没有任何缺陷。谢谢你的回答。我相信我仍然使用Bootstrap 2.2。但这不会改变aria属性。这是对我来说最简单和最相关的答案。解释得很好。感谢国王！对我来说最好的事情！Tnx！我认为这确实是最简单的解决方案，除了Bootstrap 4你使用类“show”。
$('.in,.open').removeClass('in open');

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-link").closest(".dropdown-menu").removeClass('show');

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

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

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