Vertical menu show on click menu staying open

Question

Looking for help with a vertical flyout menu that opens on click, then remains open until another menu item is clicked (doesn't disappearing when hovering off). Also once both have been click rollover states do not show until clicked. Below is a codepen link 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
});

It's horribly written but it should help you solve the problem in your own way. I'm short on time so the code will need refactoring as there is quite a bit of repetition and unnecessary code (mainly the a tags and .parent).

I've hid the sub-menus with jQuery instead of CSS and re-wrote the jQuery.

All sub menus now open on click, other menus are hidden on click, and the hover affects are only displayed on click and get removed when the mouse leaves the link.

Note that the sub-sub-menu links also trigger a slide, that should be a quick fix.

Hope it helps.