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

使用垂直弹出式菜单查找帮助，该菜单在单击时打开，然后保持打开状态，直到单击另一个菜单项为止（在悬停关闭时不会消失）。此外，一旦两个按钮都被单击，则在单击之前不会显示滚动状态。下面是一个代码笔链接

html:

}))

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

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

所有子菜单现在在单击时打开，其他菜单在单击时隐藏，悬停影响仅在单击时显示，并在鼠标离开链接时删除

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

希望能有帮助

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

.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();

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