点击另一个菜单时关闭菜单
我有一个菜单,当用户在该页面上时,该菜单已打开。所以当用户点击另一个菜单时,打开的菜单需要关闭,另一个菜单打开。到目前为止,我只设法在点击时打开菜单。我无法关闭另一个打开的菜单。点击另一个菜单时关闭菜单
我的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
隐藏:visible
元素,呈现出前目前点击菜单。
$('.sidenav_wrapper:visible').not($(this).find('.sidenav_wrapper:first')).hide();
,或者如果你想保持目前的格打开,
$('.sidenav_wrapper:visible').hide();
或单集使用.add()
和.toggle()
一个更简单的内胆,
$('.sidenav_wrapper:visible').add($(this).find('.sidenav_wrapper:first')).toggle();
简短的方式做到这一点,并没有真正让动画是这样
$(menuThing).on('click', function(){
$(menuThing).toggle(false);
$(this).toggle(true);
})
它关闭“所有” menues,然后打开你当前点击。只要你不做slideToggle()或类似的东西,这可以在视觉上工作。问吧,如果你需要更多的澄清
当您显示当前.sidenav_wrapper
,你将需要隐藏其他.sidenav_wrapper
。
所以只是在.click() function
添加$("li ul.sidenav_wrapper").css("display","none");
你之前切换当前.sidenav_wrapper
使用这种简单的方法:
$(".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/
而不是使用拨动,在添加类css将其显示为块。然后,在相应的事件上使用addClass()和removeClass()。您可能需要使用。不是()将目标锁定在当前点击的其他位置。
所有你需要的是
手风琴。你会看到它做魔术!
我相信手风琴很容易解决你的问题。增加的好处是,你可以做到这一点整洁干净使用手风琴。
鸟巢为您添加和规模
这包含菜单,每个包含子菜单,其中只有一个应是在同一时间和含三级菜单子菜单打开,其中仅一次应该开放。
保持代码干净
无需编写点击听众和togglers的几行。所有你需要做的就是添加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
万岁!它的工作原理...
就是这样。谢谢。 – Niks