Javascript为具有相同类的元素添加样式答案

【问题标题】：Javascript adding styling to element with same classJavascript为具有相同类的元素添加样式
【发布时间】：2017-11-23 23:41:32
【问题描述】：

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

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>

有谁知道为什么会发生这种情况以及如何解决这个问题？

【问题讨论】：

也许可以尝试 jQuery(this).find('ul').first() 或 $(this).find('ul').first() 来添加和删除类。

标签： javascript jquery html css drop-down-menu

【解决方案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;
    }
  });
});

【讨论】：