CODEWITHSUNDEEP
javascriptjqueryhtml
niceoneishere
niceoneishere

Reputation: 343

jQuery mega menu display only the clicked parent submenu

I have a simple Mega Menu. I am trying to display the sub menu of the parent menu item clicked. But for some reason when I click the parent item all the sub menu's are displaying instead of the clicked parent item sub menu. What I am doing wrong.

Here is my JSFiddle link

https://jsfiddle.net/jokcLjkb/4/

here is my js code.

    $(document).ready(function() {
    $("a.drop").on('click', function(e) {   
        e.preventDefault();
        $("ul.mainNav li > .drop-full-col").css("display","block");
    });
});

Thanks and Appreciate it

Upvotes: 0

Views: 225

Answers (1)

j08691
j08691

Reputation: 208032

Your line:

$("ul.mainNav li > .drop-full-col")

Will select all the submenus because you target the main nav and all the <div class="drop-full-col"> elements. You need to select only the ones relative to the link you click on, and to do that you need to use this to refer to the link being clicked on. So change:

$("ul.mainNav li > .drop-full-col").css("display","block");

to

$(this).closest('li').find(".drop-full-col").css("display", "block");

jsFiddle example

.closest('li') will look for the closest list item when you click the link, and .find(".drop-full-col") will then search down the DOM for the div you want.

Upvotes: 1

Related Questions