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

Your HTML seems to lack the classes and ids of your CSS and jQuery. Can you fix that please? Also, you appear to be using UberMenu? What are you trying to do to it? — OneHoopyFrood
– OneHoopyFrood, Commented Aug 18, 2014 at 18:23
@colepanike sorry but the code is not working I've putted it in the jsfiddle please see if you can give me any solution by this code jsfiddle.net/7d7dow03 — Adnan Shawkat
– Adnan Shawkat, Commented Aug 18, 2014 at 18:34

OneHoopyFrood · Accepted Answer · 2014-08-18 19:01:16Z

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.

edited Aug 18, 2014 at 19:01

answered Aug 18, 2014 at 18:50

OneHoopyFrood

3,9893 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Adnan Shawkat Over a year ago

@colpanke thanks for the nice solution but I've still got the problem in my site don't know why but it's still there. let me share my site with you so that you can understand it clearly. I'm testing it for responsive navigation. while opening the menu the first toggle works then clicking on the megaUber a it's working but inside there are more ul li nested these are not working in my site don't know why can u suggest me why it's not working? here's the link of the site: allwhite3000.co.uk

OneHoopyFrood Over a year ago

Which links have the double submenus?

OneHoopyFrood Over a year ago

They work for me. I'm afraid at this point you're asking for me to debug your site for you and that is not appropriate for this format, not to mention that it's a wordpress and therefor a nightmare to debug without admin access. The problem is most likely do to some misconfiguration on your part :\ Sorry. You shouldn't have to mess with the javascript at all to do this. My answer is correct for what you actually asked though. I would appreciate you marking it as such.

Adnan Shawkat Over a year ago

sorry for the wrong information it's working actually. but the thing is while opening the other ul from li you can see that both ul's are open but i want one to be open not all of them that's why i've coded the previous version. do you think you can help me sought that out?

OneHoopyFrood Over a year ago

So you want to have the first sub-menu disappear when you open the second sub-menu?

|

Collectives™ on Stack Overflow

multilevel dropdown menu toggle not working using jquery

1 Answer 1

The Fix:

Here's what's happening:

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The Fix:

Here's what's happening:

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related