Question

在这个地方搜索但我仍然找不到符合我情况的解决方案。所以我决定自己问一下。这就是我想要做的事情：

如果点击其中一个<li>，则会为该特定<li>提供一个名为“bla”的新类，而任何其他<li>将失去“bla”类。
如果点击了已经拥有“bla”类的<li>，它将失去“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');
});

FIDDLE DEMO

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');
    }
});

<强> Check Fiddle

使用jQuery添加和删除类

2 个答案: