How to add and toggle all li of child uls to parent ul below specific clicked li

Question

Working on converting nested menu to mobil... I need to add each li of dropdown right below parent li on click and toggle them.

Here is current menu markup where dropdown is visible on hover:

<ul class="navigation-menu">

    <li class="white-hover"><a ceid="rd-menu" class="nav-main-links" href="#">Category</a>
        <div class="drop">
            <div class="drop-holder">
                <div class="left-side-menu dividerLine">
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
                <div class="right-side-menu">
                    <ul>
                <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>

    <li>....</li>
    <li>....</li>
    <li>....</li>
</ul>

Not so sure how to tackle this one. I believe I need to elaborate on something similar to:

$(document).ready(function() 
 {
    $('ul.navigation-menu li').click(function(e) 
    { 
        $(this).find('li').each(function(){
            $(this).after( each child li );
        });
    });
});

I would really appreciate if someone can point me in the right direction.

Answer 1

Just toggle the style (originally on hover) on click event:

CSS:

/* before */
ul.navigation-menu li:hover {...}
ul.navigation-menu li:hover div.drop {...}

/* after */
ul.navigation-menu li.active {...}
ul.navigation-menu li.active div.drop {...}

JS:

$(document).ready(function() {
    $('.white-hover').click(function(e) {
        $(this).toggleClass('active');
    });
});

---

Here's the demo with a little improvement:

 $(document).ready(function() { $('.white-hover').click(function(e) { if (!$(this).hasClass('active')) { $('.active').removeClass('active'); } $(this).toggleClass('active'); }); }); 

 ul.navigation-menu li { display: block; position: relative; } ul.navigation-menu li.active { display: block; background-color: #09b5c9; } ul.navigation-menu li div.drop { display: none; } ul.navigation-menu li.active div.drop { display: block; position: absolute; width: 387px; } .drop { background-color: #fff; width: 387px; padding-left: 23px; padding-right: 25px; left: 0px; z-index: 9999; border-top:4px solid #09b5c9; top:46px; padding-bottom: 25px; box-shadow: 1px 3px 4px 0 #888 !important; display: block; position: absolute; padding-top: 15px; } .drop-holder { width:387px; float: left; } 

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <ul class="navigation-menu"> <li class="white-hover"> <a ceid="rd-menu" class="nav-main-links" href="#">Category</a> <div class="drop"> <div class="drop-holder"> <div class="left-side-menu dividerLine"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div class="right-side-menu"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> </div> </li> <li class="white-hover"> <a ceid="rd-menu" class="nav-main-links" href="#">Category</a> <div class="drop"> <div class="drop-holder"> <div class="left-side-menu dividerLine"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div class="right-side-menu"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> </div> </li> <li class="white-hover"> <a ceid="rd-menu" class="nav-main-links" href="#">Category</a> <div class="drop"> <div class="drop-holder"> <div class="left-side-menu dividerLine"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div class="right-side-menu"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> </div> </li> <li class="white-hover"> <a ceid="rd-menu" class="nav-main-links" href="#">Category</a> <div class="drop"> <div class="drop-holder"> <div class="left-side-menu dividerLine"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div class="right-side-menu"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> </div> </li> </ul>