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

Question

Hi all i am still learning jQuery and i am having a problem with my menu. When i click on any menu with class "tm-nav-vertical" or "tm-nav-horizontal" it removes .active class in the first menu. I don't want to create a code that is for specific menu cause i want to re-use it always (example .menu1 .menu2).

I was trying to use something like .siblings but i didn't manage to make it work.

$(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

Using calls like:

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

are going to select elements from anywhere in the document.

What you want to do is find the parent menu first then find the element(s) you want to modify. You can get the parent menu by calling jQuery's (or even DOM api's ) closest() method passing in the class selector of the menu. It will find the closest ancestor element that matches the passed selector.

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

Note if your menu is more complex (multiple levels, multiple ".active" elements, etc) you will have to do something more than a simple find()