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

Posted 2023-05-08

【中文标题】jQuery问题 - 具有相同类的不同菜单之间的冲突

【英文标题】：jQuery Problem - Conflict between different menu with same class

【发布时间】：2019-11-23 16:55:18

【问题描述】：

大家好，我还在学习 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');
    
););

【问题讨论】：

如果您想创建可重用的东西，请使用类、构造函数（您调用new 来创建对象的函数） 或函数。

【参考方案1】：

使用如下调用：

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

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

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

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

请注意，如果您的菜单更复杂（多级、多个“.active”元素等），您需要做的不仅仅是简单的find()