仅将类添加到一个 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函数并切换它，而不是查找所有元素。

Answer 2

当您捕获点击时，将currentTarget传递给您的 toggleNav 函数，并使用它来确定要定位的div：

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

Answer 3

将 .first() jQuery 过滤器添加到您的选择器中。更多信息请访问 https://api.jquery.com/first/

$('.cd-dropdown').first().toggleClass('dropdown-is-active', navIsVisible);