Question

我有一个简单的超级菜单。我正在尝试显示单击的父菜单项的子菜单。但由于某些原因，当我单击父项时，所有子菜单都显示而不是单击的父项子菜单。我做错了什么。

这是我的JSFiddle链接

这是我的js代码。

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

感谢并欣赏它

Answer 1

你的专栏：

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

将选择所有子菜单，因为您定位主导航和所有<div class="drop-full-col">元素。您只需选择与您单击的链接相关的链接，为此，您需要使用this来引用所点击的链接。所以改变：

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

到

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

<强> jsFiddle example

单击链接后，

.closest('li')将查找最接近的列表项，然后.find(".drop-full-col")将在DOM中搜索您想要的div。

jQuery mega菜单仅显示单击的父子菜单

1 个答案: