单击时隐藏下拉菜单 - Bootstrap答案

【问题标题】：Hide dropdown menu when clicked - Bootstrap单击时隐藏下拉菜单 - Bootstrap
【发布时间】：2015-10-11 23:54:48
【问题描述】：

我的网站中有一个导航栏，所有链接都通过 AJAX 将内容加载到容器中。

现在，我需要在单击链接时隐藏下拉菜单。这不是引导程序的正常行为。

这是我的代码。

$(".dropdown-menu a").click(function() { $(this).closest(".dropdown-menu").prev().toggle(); });

http://jsfiddle.net/fw7vh/158/

我最近浏览了现有答案，但它删除了下拉按钮。请指教。谢谢！

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

尝试：

$(".dropdown-menu a").click(function() {
    var menu = $(this).closest(".dropdown-menu");
    $(menu).css('display','none');
    setTimeout(function(){
        $(menu).css('display','');
    },200);
});

【讨论】：

简洁的技巧。谢谢！我将使用真实站点对其进行测试。谢谢。

【解决方案2】：

如果我正确理解了您的问题，这可能会对您有所帮助。

    $(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").toggle();
});

【讨论】：

该代码的问题是当我将鼠标悬停在链接上时，它不再显示子菜单。 :(

【解决方案3】：

您可以通过替换代码轻松实现这一目标

$(".dropdown-menu a").click(function() {
  $(this).closest(".dropdown-menu").prev().toggle(); 
});

有了这个

$(".dropdown-menu a").click(function() { 
   $(document.body).click(); 
});

这是工作的fiddle

【讨论】：

嗨。让我澄清一下。当我悬停下拉菜单时，它会显示一个下拉菜单。如果用户单击菜单，它应该隐藏下拉菜单。从我之前的代码中，它完美地隐藏了它，但在悬停时不再显示。
是的，我做到了。我单击子菜单中的链接，它并没有消失。 :(
尝试将鼠标从菜单上移开