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

Question

我正在下拉菜单中制作一个下拉菜单，我希望我有几个头部元素，如果您单击其中一个，该头部元素中的下拉菜单将显示为 block 元素。但问题是它们都具有相同的类，当我想添加一个类时，头部元素中的所有下拉列表都会获得该类。我在这里做错了什么？

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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav menu">
        <li class="item-101 default deeper parent">
               <a href="/">Home</a>
               <ul class="nav-child unstyled small clicked">
                  <li class="item-124">
                      <a href="/home/maandmail">Maandmail</a>
                  </li>
              </ul>
         </li>
         <li class="item-102 default deeper parent">
               <a href="/">Contact</a>
               <ul class="nav-child unstyled small clicked">
                  <li class="item-125">
                      <a href="/home/contact-page">Contact pagina</a>
                  </li>
              </ul>
         </li>
    </ul>

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

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;
    }
  });
});