垂直菜单显示点击菜单保持打开状态

问题描述：

寻找垂直弹出式菜单的帮助，该菜单在点击时打开，然后保持打开状态，直到单击另一个菜单项（悬停时不会消失）。同样，一旦两个点击翻转状态都不显示，直到点击。下面是一个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();

}）;

答

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。

所有的子菜单现在打开点击，其他菜单隐藏点击，悬停的影响只显示在点击，当鼠标离开链接时被删除。

请注意，子子菜单链接也触发幻灯片，这应该是一个快速修复。

希望它有帮助。

垂直菜单显示点击菜单保持打开状态

相关推荐