当下拉菜单打开时,Twitter Bootstrap关闭可折叠菜单? [英] Twitter Bootstrap close collapsible menu when dropdown menu is open?
问题描述
我正在使用Twitter Bootstrap为我的网站创建一个导航栏。我通常使用 Dropdown插件来创建包含多个菜单项的菜单;但对于我不想关闭的菜单,除非故意这样做(例如搜索框 [1] ),我使用折叠插件以创建可折叠菜单。
I am creating a navbar for my site with Twitter Bootstrap. I usually use the Dropdown plugin for creating menus with multiple menu-items; but for the menus that I don't want to close unless intentionally done so (e.g. Search box [1]), I use the collapse plugin to create a collapsible menu.
为了给您一个想法,这里是导航栏标记的骨架:
To give you an idea, here's a skeleton of the navbar's markup:
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="/">...</a>
</div>
<div class="collapse navbar-collapse">
<!-- Dropdown Menu -->
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="/categories/" class="dropdown-toggle" data-toggle="dropdown">Categories</a>
<ul class="dropdown-menu">
<li><a href="/tech/">Tech</a></li>
<li><a href="/autos/">Autos</a></li>
<li><a href="/travel/">Travel</a></li>
</ul>
</li>
</ul>
<!-- Collapsible Menu -->
<ul class="nav navbar-nav navbar-right">
<li id="nav-search" class="collapsible-menu">
<a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="#">Search</a>
<div id="nav-searchform" class="collapse">
<!-- Search Form -->
</div>
</li>
</ul>
</div>
</nav>
请注意评论<! - 下拉菜单 - >上面代码中的
和<! - 可折叠菜单 - >
,分别表示下拉菜单和可折叠菜单。
Please note the comments <!-- Dropdown Menu -->
and <!-- Collapsible Menu -->
in the code above, which denote the dropdown and collapsible menus respectively.
问题:如果可折叠菜单(除非再次点击菜单,它不会关闭)打开,用户点击其中一个下拉菜单,两个菜单都是开放的。我希望折叠菜单在打开下拉菜单时自动关闭。
Problem: If the collapsible menu (which doesn't close unless the menu is clicked again) is open, and user clicks on one of the dropdown menus, both menus are open. I want the collapsible menu to automatically close when the dropdown menu is opened.
我该怎么做(使用jQuery)?
How do I do it (with jQuery)?
我已尝试过这些,但似乎都没有用:
I've tried these, among others, but none seem to work:
jQuery(document).ready(function($){
$('.dropdown-toggle').click(function() {
$(this).closest('#nav-search').toggleClass('selected');
});
});
和
jQuery(document).ready(function($){
$('.dropdown-toggle').on('show.bs.dropdown', function () {
$(this).closest('#nav-search').children().toggleClass('in');
});
});
和
jQuery(document).ready(function($){
$('.dropdown-toggle').on('show.bs.dropdown', function () {
$(this).closest('#nav-search').children().removeClass('in');
});
});
我不确定我做错了什么。
I am not sure what I am doing wrong.
脚注:
- 如果我也在搜索框中使用Bootstrap的Dropdown插件,则下拉列表当用户点击输入/文本区域时关闭,这就是我选择使用Collapse插件的原因。
推荐答案
$('.dropdown').click(function(){
if($('#nav-searchform').hasClass('in'))
$('#nav-searchform').collapse('hide');
});
这篇关于当下拉菜单打开时,Twitter Bootstrap关闭可折叠菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!