我有一个菜单，当用户在该页面上时它已打开。因此，当用户点击另一个菜单时，打开的菜单需要关闭，另一个菜单打开。到目前为止，我只是设法在点击时打开菜单。我无法关闭其他打开的菜单。
我的HTML
<div class="col-lg-4 col-md-4">
<div class="second_menu">
<div id="second-menu" class="collapse navbar-collapse menu_two">
<ul class="nav navbar-nav inside-nav">
<li class="active_sub_menu">
<a href="javascript:void(0);">Menu 1</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 1</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="javascript:void(0);">Menu 2</a>
<ul class="sidenav_wrapper" style="display: none;">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 2</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 3</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 4</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 5</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="javascript:void(0);">Menu 3</a>
<ul class="sidenav_wrapper" style="display: none">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 6</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 7</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 8</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
我的CSS
.active_sub_menu .sidenav_wrapper {
display: block;
}
我的JS
$( ".sidenav_active" ).parent().css({"display":"block"});
$('ul.navbar-nav li').click(function(){
$(this).find('.sidenav_wrapper:first').toggle();
});
我的jsfiddle：JSFIDDLE
答案 0 :(得分：1)
隐藏:visible元素，然后再显示当前点击的菜单。
$('.sidenav_wrapper:visible').not($(this).find('.sidenav_wrapper:first')).hide();
或者如果你想保持当前的div打开，
$('.sidenav_wrapper:visible').hide();
<强> Updated Fiddle
或者在单个集合中使用.add()和.toggle()的更简单的单行，
$('.sidenav_wrapper:visible').add($(this).find('.sidenav_wrapper:first')).toggle();
<强> Updated Fiddle2
答案 1 :(得分：0)
这样做的简短方法，实际上不允许动画就像这样
$(menuThing).on('click', function(){
$(menuThing).toggle(false);
$(this).toggle(true);
})
关闭“所有”菜单，然后打开您当前点击的内容。只要你不做slideToggle（）或类似的东西，这在视觉上是有效的。如果您需要更多说明，请随时联系
答案 2 :(得分：0)
答案 3 :(得分：0)
当您显示当前.sidenav_wrapper时，您需要隐藏另一个.sidenav_wrapper。
在切换当前$("li ul.sidenav_wrapper").css("display","none");之前，只需在.click() function中添加.sidenav_wrapper
答案 4 :(得分：0)
使用这个简单的方法：
$( ".sidenav_active" ).parent().css({"display":"block"});
$('ul.navbar-nav li').click(function(){
$('.sidenav_wrapper').hide();
$(this).find('.sidenav_wrapper:first').toggle();
});
jsfiddle：http://jsfiddle.net/rsewsg4t/3/
答案 5 :(得分：0)
不使用切换，而是在css中添加一个类以将其显示为块。然后，在适当的事件上相应地使用addClass（）和removeClass（）。您可能需要使用.not（）来定位除当前单击的所有其他li。
答案 6 :(得分：0)
你需要的只是
手风琴。你会看到它有魔力！
我相信手风琴可以轻松解决您的问题。额外的好处是你可以使用手风琴整洁干净。
在添加和缩放时嵌套
这包含菜单，每个菜单包含子菜单，其中一次只能打开一个菜单，子菜单包含三级菜单，其中一次只能打开一个菜单。
保持代码清洁
无需编写多行点击侦听器和切换器。您需要做的就是添加bootstrap（css和js）和jQuery（js），这将开箱即用。
我认为你正在寻找类似的东西：
将此项保存为something.html并在浏览器中将其打开
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<body>
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#name-parent-select">
<h4 class="panel-title">Name</h4>
</a>
</div>
<div id="name-parent-select" class="panel-collapse collapse in">
<div class="panel-body">
<div class="input-group">
<input id="nameFill" type="text" class="form-control" placeholder="Type name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#number-parent-select">
<h4 class="panel-title">Number</h4>
</a>
</div>
<div id="number-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<div class="input-group">
<input id="phoneFill" type="text" class="form-control" placeholder="Type number...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#group-parent-select">
<h4 class="panel-title">Group</h4>
</a>
</div>
<div id="group-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type group name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#call-type-parent-select">
<h4 class="panel-title">Call Type</h4>
</a>
</div>
<div id="call-type-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="missedFill" type="checkbox"> Missed </label> </div> </li>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="incomingFill" type="checkbox"> Incoming </label> </div> </li>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="outgoingFill" type="checkbox"> Outgoing </label> </div> </li>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="blockedFill" type="checkbox"> Blocked </label> </div> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#date-parent-select">
<h4 class="panel-title">Date</h4>
</a>
</div>
<div id="date-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> Today </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Yesterday </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Last Week </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Last Fortnight </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Last Month </label> </div> </li>
</ul>
<div id="sub-accordion-date" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-date" href="#between-date-select">
<h4 class="panel-title">Custom Date</h4>
</a>
</div>
<div id="between-date-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Select date... dd/mm/yyyy">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-date" href="#between-date-range-select">
<h4 class="panel-title">Custom Range</h4>
</a>
</div>
<div id="between-date-range-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start date... dd/mm/yyyy">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
</span>
</div>
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="End date... dd/mm/yyyy">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#time-parent-select">
<h4 class="panel-title">Time</h4>
</a>
</div>
<div id="time-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> Morning </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Afternoon </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Evening </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Night </label> </div> </li>
</ul>
<div id="sub-accordion-time" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-time" href="#between-time-select">
<h4 class="panel-title">Custom</h4>
</a>
</div>
<div id="between-time-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start time... hh:mm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="End time... hh:mm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#duration-parent-select">
<h4 class="panel-title">Duration</h4>
</a>
</div>
<div id="duration-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<div id="sub-accordion-duration" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#greater-than-duration-select">
<h4 class="panel-title">Greater than</h4>
</a>
</div>
<div id="greater-than-duration-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 minute </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 5 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 10 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 30 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 hour </label> </div> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#less-than-duration-select">
<h4 class="panel-title">Less than</h4>
</a>
</div>
<div id="less-than-duration-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 minute </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 5 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 10 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 30 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 hour </label> </div> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#between-duration-select">
<h4 class="panel-title">Between</h4>
</a>
</div>
<div id="between-duration-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start duration... mm:ss">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="End duration... mm:ss">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"> </script>
</body> </html>
你说完这个...... LOLZ
乌拉！它有效......