Вертикальное меню показывает, что меню кликов остается открытым

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> 

СКС

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

Все подменю теперь открываются по щелчку, другие меню скрыты при щелчке, а зависание влияет только на щелчок и удаляется, когда мышь покидает ссылку.

Обратите внимание, что ссылки под-подменю также запускают слайд, это должно быть быстрым решением.

Надеюсь, это поможет.