代码之家 › 专栏 › 技术社区 › 2cats

使用jQuery单击时将类分配给列表项

removeclass addclass click jquery

2cats · 技术社区 · 10 年前

我正在尝试将类“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>

非常感谢。

1 回复 | 直到 10 年前

KAD Moudiz 10 年前

我添加了一个类 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>