使用 jQuery 将 class 分配给单击的列表项

Question

我正在尝试将 class "current" 添加到单击的列表项（仅 "About" 和 "Events"，而不是作为实际链接的子菜单项-- "About" 和 "Events" 不去任何地方）并且，当单击另一个列表项时，将 class "current" 添加到新单击的项目并将其从列表中删除以前点击的项目。此代码几乎可以工作，但需要单击两次才能进行切换——第一个项目通过第一次单击保持当前 class，第二个项目在第二次单击时接收它。任何关于如何将其简化为一键式操作的想法都将不胜感激。这是 HTML:

jQuery('li').click(function() {
  jQuery(this).addClass('current').siblings().removeClass('current');
});

.current {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="current">
  <a href="#">About</a>
  <div class="submenu second about-menu">
    <ul>
      <li><a href="link1">Link1</a>
      </li>
      <li><a href="link2">Link2</a>
      </li>
    </ul>
</li>
</div>
</li>
<li> <a href="#">Events</a>
  <div class="submenu second events-menu">
    <ul>
      ...
    </ul>
</li>
</div>
</li>

谢谢！

Answer 1

我在主要 <li> 项目中添加了 class topLevel 只是为了区分它们（关于，事件）。

点击<li>项时，首先从所有顶级项jQuery('.topLevel').removeClass('current');中移除当前class，然后检查列表项是否为顶级列表，直接添加current class ，否则将其添加到最近的顶级列表。

我希望这是你需要的：

jQuery('li').click(function() {

   jQuery('.topLevel').removeClass('current');

   if(jQuery(this).hasClass('topLevel'))
   {
     jQuery(this).addClass('current');
   }
   else
   {
       jQuery(this).closest('topLevel').addClass('current');
   }
});

.current {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="topLevel current">
  <a href="#">About</a>
  <div class="submenu second about-menu">
    <ul>
      <li><a href="#">Link1</a>
      </li>
      <li><a href="#">Link2</a>
      </li>
    </ul>
</li>
</div>
</li>
<li  class="topLevel"> <a href="#">Events</a>
  <div class="submenu second events-menu">
    <ul>
      ...
    </ul>
</li>
</div>
</li>

使用 jQuery 将 class 分配给单击的列表项

Assign class to list item on click with jQuery

jquery

addclass

click

removeclass