Question

我的网站使用Ajax，我希望每次用户点击每个菜单项时关闭Bootstrap的折叠菜单，就像这段代码一样。但是这段代码不起作用!!该死！

$('.menu-item').click(function() {
$('.collapse').collapse('hide');
});

我该如何解决？

（菜单代码只是一个简单的bootstrap 3.0.0）：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

菜单代码：

<div class="col-md-6 downmy">
<div class="navbar-collapse in" style="height: auto;">
<div class="menuTop"><ul id="menu-primary" class="nav nav-pills"><li id="menu-item-605" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-605"><a href="1.htm">Home</a></li>
<li id="menu-item-314" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314"><a href="2.htm">My Posts</a></li>
<li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315"><a href="3.htm">Guestbook</a></li>
</ul>
</div>
</div>
</div>

Answer 1

当类'.collapse'的元素崩溃或变得可见时，'.collapse'类将被.in类替换。因此，您还必须在.in课程中应用隐藏。

$('.menu-item').click(function() {
    $('.in').collapse('hide');
});

您的菜单项包含一个锚点，点击此按钮将打开一个新页面...所以我不明白您的问题。为了防止这种情况，请在您的代码中添加event.preventDefault（http://api.jquery.com/event.preventDefault/）：

$('.menu-item').click(function(event) {
    event.preventDefault();

$('.in').collapse('hide');
});

Answer 2

以下查询对我来说很好：

//The ":not('.dropdown-toggle')" is for the drop down menu (like a language menu) because 
//  I didn't want my navigation to close when clicking sub menu
$(".nav li a:not('.dropdown-toggle')").on('click',function(){
  $('.navbar-collapse.in').collapse('hide');
});

您可以将其添加到您的网页或$(document).ready(function(){/*...*/});方法

ajax站点中的Bootstrap菜单崩溃。如何在每次点击时关闭菜单？

2 个答案: