jQuery巨型菜单仅显示单击的父子菜单

Question

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

Answer 1

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.