Javascript 仅将类添加到一个div

我有一个函数，可以在菜单项中添加或删除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();
    });

---

我真的很感激任何帮助，提前谢谢你

将单击目标作为参数传递给您的

toggleNav

函数，并切换该参数，而不是查找所有元素。

捕获单击时，将

currentTarget

传递给您的toggleNav函数，并使用该参数确定要将哪个

div

作为目标：

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

将

.first（）

jQuery过滤器添加到选择器中。更多信息请访问

---

使用

此

。类似于

toggleNav（这个）和
此.toggleClass（'dropdown-is-active'，导航可见）。传递
这个
怎么样？相同的结果！甚至可以将其作为jQuery对象$（this）或$（event.currentTarget）传递，以便您可以直接在NavFunction中使用它。这是行不通的。如果用户单击标记中第二个下拉列表，它将对第一个应用类更改。
$('.cd-dropdown').first().toggleClass('dropdown-is-active', navIsVisible);