垂直菜單顯示點擊菜單保持打開狀態

Question

尋找垂直彈出式菜單的幫助，該菜單在點擊時打開，然後保持打開狀態，直到單擊另一個菜單項（懸停時不會消失）。同樣，一旦兩個點擊翻轉狀態都不顯示，直到點擊。下面是一個codepen鏈接 http://codepen.io/matriplett/pen/JoVdYz

HTML：

<nav class="nav" > 
<ul id="main-menu" class="nav parent"> 
<li class="parent"><a href="#">Menu 1</a> 
<ul class="sub-menu"> 
    <li class=""><a href="#">sub 1</a></li> 
    <li class=""><a href="#">sub 2</a> 
    <ul class="sub-sub-menu"> 
     <li class=""><a href="#">sub sub 1</a></li> 
     <li class=""><a href="#">sub sub 2</a></li> 
     <li class=""><a href="#">sub sub 3</a></li> 
     <li class=""><a href="#">sub sub 4</a></li> 
    </ul></li> 
    <li class=""><a href="#">sub 3</a></li> 
    <li class=""><a href="#">sub 4</a></li> 
    <li class=""><a href="#">sub 5</a></li> 
</ul> 
</li> 
<li class="parent"><a href="#">Menu 2</a> 
<ul class="sub-menu"> 
    <li class=""><a href="#">sub 1</a></li> 
    <li class=""><a href="#">sub 2</a> 
<ul class="sub-sub-menu"> 
     <li class=""><a href="#">sub sub 1</a></li> 
     <li class=""><a href="#">sub sub 2</a></li> 
     <li class=""><a href="#">sub sub 3</a></li> 
     <li class=""><a href="#">sub sub 4</a></li> 
    </ul> 
</li> 
    <li class=""><a href="#">sub 3</a> 
    <ul class="sub-sub-menu"> 
     <li class=""><a href="#">sub sub 1</a></li> 
     <li class=""><a href="#">sub sub 2</a></li> 
     <li class=""><a href="#">sub sub 3</a></li> 
     <li class=""><a href="#">sub sub 4</a></li> 
    </ul> 
</li> 
</ul> 
</li> 
<li class=""><a href="#">Menu 3</a></li> 
<li class=""><a href="#">Menu 4</a></li> 
</ul> 
</nav> 

SCSS

.nav { 
    border: 0; 
    padding:2%; 

    ul {  
    } 

    li { 
     position: relative; 
     text-transform: uppercase; 
     font-size: 1em; 
    list-style:none; 


     a { 
      border-bottom: 0; 
      line-height: 1.2; 
     color:#000; 
      text-decoration:none; 
      &:hover, &:focus { 
       color: #56a0d3; 
      } 
     } 

     ul.sub-menu{ 
      margin-left:40px; 
      margin-top:-18px; 
      border-top: 0; 
      position: absolute; 
      visibility: hidden; 
      z-index: 8999; 
      display:block; 
     line-height:2; 

      li { 

       a { 
        margin-top:0; 
        padding-left: 10px; 
        border-right: 0; 
        display: block; 
        line-height: 1.2; 
        color: #56aod3; 

        &:hover, 
        &:focus {color:red;} 

        &:link {} 
       } 



      } 

     } 

     /* showing sub-menus */ 
     &:hover > ul { 
      top: auto; 
      visibility:visible; 
     } 

    } /* end .menu ul li */ 

    /* highlight current page */ 
    li.current-menu-item, 
    li.current_page_item, 
    li.current_page_ancestor { 
     a { color:#56a0d3;} 
    } /* end current highlighters */ 


    sub-sub-menu ul li a { 
    margin-left:300px; 
    } 
} /* end .nav */ 



/* keep home page nav open on click*/ 

$('.sub-menu').hide(); //Hide children by default 

$('.parent').children().click(function(){ 
    $(this).children('.sub-menu').slideToggle('fast');  
}).children('.sub-menu').click(function (event) { 
    event.stopPropagation(); 

}）;

Answer 1

http://codepen.io/anon/pen/pvBjYv。

// Hide sub menus 
$('.sub-menu, .sub-sub-menu').hide(); 

$('li.parent > a').click(function(){ 
    $('li.parent .sub-menu').not($(this).parent().children('.sub-menu')).slideUp(); //Slide up any open .sub-menu excluding this parent 
    $(this).parent('li.parent').children('.sub-menu').slideToggle(); // slideToggle this .sub-menu 
}); 

$('li.parent li') .click(function(){ 
    $('.sub-sub-menu').not($(this).children('.sub-sub-menu')).slideUp(); // Slide up any open .sub-sub-menu 
    $(this).last('li').children('.sub-sub-menu').slideToggle(); // slodeToggle this .sub-sub-menu 
}); 

$('li.parent a') .click(function(){ 
    $(this) .addClass('active'); // Apply style on click instead of hover 
}); 

$('li.parent a') .mouseout(function(){ 
    $(this) .removeClass('active'); // Remove .active when mouse leaves link 
}); 

這是可怕的書面，但它應該可以幫助你以你自己的方式解決問題。我時間不多，所以代碼需要重構，因爲有相當多的重複和不必要的代碼（主要是標籤和.parent）。

我用jQuery隱藏了子菜單而不是CSS，並重新編寫了jQuery。

所有的子菜單現在打開點擊，其他菜單隱藏點擊，懸停的影響只顯示在點擊，當鼠標離開鏈接時被刪除。

請注意，子子菜單鏈接也觸發幻燈片，這應該是一個快速修復。

希望它有幫助。