2015-05-04 172 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

萬歲!它的工作原理...

相關問題