jquery - 使用 jQuery 添加和删除类

Question

搜索了这个地方，但我仍然找不到与我的情况相匹配的解决方案。所以我决定自己问。这是我想要做的：

• 如果<li>单击其中一个，则该特定对象<li>将被赋予一个名为“bla”的新类，而其他任何一个<li>都将失去“bla”类。
• 如果<li>单击已经具有“bla”类的a，它将失去“bla”类。
• 如果点击页面之外的任何其他内容<ul>，“bla”类将从所有<li>.

---

的HTML：

    <ul>
      <li>Item One</li>
      <li>Item Two</li>
      <li>Item Three</li>
      <li>Item Four</li>
    </ul>

---

谢谢...

Answer 1

你可以这样做：

$('ul > li').click(function () {
    $(this).toggleClass('bla').siblings().removeClass('bla');
});

$(document).click(function (e) {
    if ($(e.target).closest('ul').length > 0) return;
    $('ul > li').removeClass('bla');
});

小提琴演示

Answer 2

您可以在这些行中编写一些内容

// Bind a click event on document
$(document).on('click', function (e) {
    // Use e.target to get the element that is currently selected
    var $this = $(e.target);
    // It item is li or not having a class add it 
    if (e.target.nodeName === 'LI' && !$this.hasClass('active')) {
         $this.addClass('active').siblings().removeClass('active');
    } else {
        $('li').removeClass('active');
    }
});

检查小提琴