jQuery问题-具有相同类的不同菜单之间的冲突

Question

大家好，我仍然在学习jQuery，我的菜单有问题。 当我单击具有“ tm-nav-vertical”或“ tm-nav-horizo​​ntal”类的任何菜单时，它将在第一个菜单中删除.active类。 我不想为特定菜单创建代码，因为我想一直重复使用它（例如.menu1 .menu2）。

我试图使用.siblings之类的东西，但没有设法使其正常工作。

$(function () {
$('.tm-nav-vertical ul li, .tm-nav-horizontal ul li').click(function () {
    if ($(this).hasClass("tm-dropdown-button")) {
        if ($(this).hasClass("active")) {
            $(this).removeClass('active');
        } else {
            $('.tm-nav-vertical > ul li.active, .tm-nav-horizontal > ul li.active, .tm-dropdown-button').removeClass('active');
            $(this).addClass('active');
        }
    } else {
        $('.tm-nav-vertical ul li.active, .tm-nav-horizontal ul li.active').removeClass('active');
        $(this).addClass('active');
    }
});});

Answer 1

使用如下调用：

$('.tm-nav-vertical ul li.active, .tm-nav-horizontal ul li.active')

将要从文档中的任何位置选择元素。

您要执行的操作是先找到父菜单，然后找到要修改的元素。 您可以通过调用菜单的类选择器中的jQuery（甚至是DOM api的 ） closest()方法来获取父菜单。 它将找到与传递的选择器匹配的最接近的祖先元素。

var parentMenu = $(this).closest('.tm-nav-vertical, .tm-nav-horizontal');
parentMenu.find('ul li.active').removeClass('active');

请注意，如果您的菜单更复杂（多个级别，多个“ .active”元素等），则除了简单的find()之外，您还需要做更多的事情