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（甚至https://wearedevs.net/d/Exploit%20API）DOM api's方法来获取父菜单。它将找到与传递的选择器匹配的最接近的祖先元素。

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

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

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

1 个答案: