javascript - 仅将类添加到一个 div

Question

我有这个功能，可以向菜单项添加或删除 navIsVisible 类。它允许出现下拉菜单。但是，当我添加其中两个菜单项并单击其中一个时，会出现两者的下拉菜单。我知道这是因为这两个元素共享同一个类并且是相同的，但是我如何在不使用 ID 的情况下解决这个问题，因为我正在尝试使菜单生成数据驱动。或者我一般如何解决这个问题？我怎样才能让这个函数只影响我点击的触发器？

切换功能:

function toggleNav(){
        var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
        $('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
        $('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
        if( !navIsVisible ) {
            $('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('.has-children ul').addClass('is-hidden');
                $('.move-out').removeClass('move-out');
                $('.is-active').removeClass('is-active');
            }); 
        }
    }

正在添加的类:

$('.cd-dropdown-trigger').on('click', function(event){
    event.preventDefault();
        toggleNav();
    });

如果有任何帮助，我将不胜感激，在此先感谢您!

Answer 1

将点击目标作为参数传递给您的 toggleNav 函数并切换它，而不是查找所有元素。