Javascript将样式添加到具有相同类的元素

Question

我在下拉列表中创建一个下拉菜单，我希望我有一些头项目，如果你点击一个，那个头项目的下拉列表会显示为一个块元素。但问题是它们都有相同的类，当我想添加一个类时，头项中的所有下拉列表都会获得该类。我在这里做错了什么？

this.socket.on("updateTyping", (data) => {
  console.log('typingInSocket = ' + data.isTyping);
  this.typing = data.isTyping;
});

userIsTyping() {
  this.socket.emit('typing');
}

jQuery(document).ready(function(){
        var click = false;
        jQuery(".navbar-collapse .nav li").click(function() {
    
            if(click == false) {
                jQuery(".navbar-collapse .nav li ul").addClass('clicked');
                click = true;
            } else {
                jQuery(".navbar-collapse .nav li ul").removeClass('clicked');
                click = false;
            }
        });
    });

    .clicked {
        display: block !important;
    }

有谁知道为什么会这样，以及如何解决这个问题？

Answer 1

您必须让代码查看相对于您点击的项目的特定UL：

jQuery(document).ready(function() {
  var click = false;
  jQuery(".navbar-collapse .nav li").click(function(e) {
    if (click == false) {
      jQuery(e.currentTarget).find("ul").addClass('clicked');
      click = true;
    } else {
      jQuery(e.currentTarget).find("ul").removeClass('clicked');
      click = false;
    }
  });
});