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

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
});

它写得很糟糕，但它应该可以帮助您以自己的方式解决问题。我的时间很紧，所以代码需要重构，因为有很多重复和不必要的代码（主要是 a 标签和 .parent）。

我用 jQuery 而不是 CSS 隐藏了子菜单，并重新编写了 jQuery。

现在所有子菜单在点击时打开，其他菜单在点击时隐藏，悬停效果仅在点击时显示，并在鼠标离开链接时被移除。

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

希望对你有帮助。