multilevel dropdown menu toggle not working using jquery

Question

First of all let me tell you I'm little weak in jquery so helping here will let me learn lot about jquery. I'm trying to expand the level 2 li menu using jquery but alas after searching google for a while i'd to post my problem in here. so my problem html skeleton is somewhat like below before that i'm working on wp nav.

<div class="mobile-menu">
    <div id="megaMenu">
        <div id="megaMenuToggle"></div>
        <ul id="megaUber>
            <li>
                <ul>
                    <li>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </li>
                   <li></li>
                </ul>
             </li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
    </div>
</div>

now the problem is i can open the level 1 li in toggle but while opening the level 2 it's not toggling. here is my css code for toggling.

.mobile-menu #megaMenu #megaUber > li.active > a + ul {
    display: block !important;}

.mobile-menu #megaMenu #megaUber > li > a + ul {
    display: none !important;}

.mobile-menu #megaMenu #megaUber > li > ul > li.actives > a + ul {
    display: block !important;}
.mobile-menu #megaMenu #megaUber > li > ul > li > a + ul {
    display: none !important}

here is the jquery code that i've written which is working for the level 1 li & megaMenuToggle div toggle but not for level 2.

jQuery(function($){
    $(".mobile-menu #megaMenu #megaMenuToggle").on('click', function(){
      $(".mobile-menu #megaMenu #megaUber").slideToggle( "slow" );
    });

    $('.mobile-menu #megaMenu #megaUber li a').on('click',function(event){
      console.log('first drop');
      event.stopPropagation();
      $(".mobile-menu #megaMenu #megaUber li")
        .not($(this).parent())
        .removeClass("active");
        $(this).parent().toggleClass("active");

    });

    $('.mobile-menu #megaMenu #megaUber li ul li a').on('click',function(event){
      console.log('second drop');
      event.stopPropagation();
      $("#megaUber li")
        .not($(this).parent())
        .removeClass("active");
        $(this).parent().toggleClass("active");

      $("#megaUber li ul li")
        .not($(this).parent())
        .removeClass("actives");
        $(this).parent().toggleClass("actives");
    });
});

Answer 1

Ok I've got a working version: Fiddle

The Fix:

$(function () {
    $('#megaUber').find('a').click(function (e) {
        e.stopPropagation();
        $(this).parent().toggleClass("active");
    });
});

And this bit of CSS needed actives changed to active

.mobile-menu #megaMenu #megaUber > li > ul > li.active > a + ul {
    display: block !important;
}

This should nest infinitely.

Here's what's happening:

The jQuery looks for the list with the right id . I took out the other selector text because an id should only exist once on a page so there's no need to be more specific in the selector, which is what you were doing. Once it finds that element it looks into all it's children with the find() function and attaches click() events to all of them. Those click events reference their parent() element which goes only one level up, and puts the active class on them. That opens your menu.

The slideToggle bit just doesn't work like this. If you want that effect you'll have to rethink how the whole thing works. I won't go into that.

I'm not sure what you're trying to do with UberMenu, I've never used it. But you must have links in your html, not just <li> elements.