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

Question

大家好，我还在学习jQuery，我的菜单有问题。当我单击任何带有类"tm-nav-vertical"或"tm-nav-horizontal"的菜单时，它会删除第一个菜单中的 .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()