2015-05-04 175 views
0

我有一个菜单,当用户在该页面上时,该菜单已打开。所以当用户点击另一个菜单时,打开的菜单需要关闭,另一个菜单打开。到目前为止,我只设法在点击时打开菜单。我无法关闭另一个打开的菜单。点击另一个菜单时关闭菜单

我的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

回答

1

隐藏:visible元素,呈现出前目前点击菜单。

$('.sidenav_wrapper:visible').not($(this).find('.sidenav_wrapper:first')).hide(); 

,或者如果你想保持目前的格打开,

$('.sidenav_wrapper:visible').hide(); 

Updated Fiddle


或单集使用.add().toggle()一个更简单的内胆,

$('.sidenav_wrapper:visible').add($(this).find('.sidenav_wrapper:first')).toggle(); 

Updated Fiddle2

+0

就是这样。谢谢。 – Niks

0

简短的方式做到这一点,并没有真正让动画是这样

$(menuThing).on('click', function(){ 
    $(menuThing).toggle(false); 
    $(this).toggle(true); 
}) 

它关闭“所有” menues,然后打开你当前点击。只要你不做slideToggle()或类似的东西,这可以在视觉上工作。问吧,如果你需要更多的澄清

0

补充一点:

$('ul.navbar-nav li').find('.sidenav_wrapper:first').hide(); 

因此,这将隐藏所有的第一则显示选定的一个。

Fiddle

0

当您显示当前.sidenav_wrapper,你将需要隐藏其他.sidenav_wrapper

所以只是在.click() function添加$("li ul.sidenav_wrapper").css("display","none");你之前切换当前.sidenav_wrapper

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/

0

而不是使用拨动,在添加类css将其显示为块。然后,在相应的事件上使用addClass()和removeClass()。您可能需要使用。不是()将目标锁定在当前点击的其他位置。

0

所有你需要的是

手风琴。你会看到它做魔术!

我相信手风琴很容易解决你的问题。增加的好处是,你可以做到这一点整洁干净使用手风琴。

鸟巢为您添加和规模

这包含菜单,每个包含子菜单,其中只有一个应是在同一时间和含三级菜单子菜单打开,其中仅一次应该开放。

保持代码干净

无需编写点击听众和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

万岁!它的工作原理...

相关问题