Question

我正在尝试将“当前”类添加到单击的列表项（仅“关于”和“事件”，而不是作为实际链接的子菜单项 - “关于”和“事件”不转到任何地方），当单击另一个列表项时，将“current”类添加到新单击的项目中，并将其从先前单击的项目中删除。此代码几乎可以正常工作，但需要两次单击才能进行切换 - 第一个项目通过第一次单击保持当前类，第二个项目在第二次单击时接收它。关于如何将其归结为一键动作的任何想法将不胜感激。这是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

我已在主要topLevel项目中添加了一个类<li>，以便区分它们（关于，事件）。

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

我希望这就是你所需要的：

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上分配类到列表项

1 个答案: