Question

可能重复：
How to detect a click outside an element?

我有一个无序列表，当用户单击其中一个列表项时，列表项会获得一个“活动”类。是否有可能写出一个声明。如果用户点击$（this）到另一个列表项addClass（“active2”）。如果你不明白让我知道。谢谢！

Answer 1

我理解你的问题：

第一个单击的项始终保持类active2，任何其他单击的项都会获得类active（从之前单击的项中删除active）。

解决方案如下所示：

如果列表中没有包含类active的项目，则之前未选择任何项目，因此您将active添加到当前项目中。
如果有一个元素，但没有元素包含类active2，请将active2添加到包含类active的项目中，删除active并将其添加到当前项目中。
如果同时存在active和active2，请从该项中删除active并将active添加到当前项目。

在代码中看起来像这样：

var $lis = $("#myList li");

$('#myList').on('click', 'li', function() {
    if($lis.hasClass('active')) {
        if(!$lis.hasClass('active2')) {
            $lis.filter('.active').toggleClass('active active2');
        }
        else {
            $lis.filter('.active').removeClass('active');
        }
    }
    $(this).addClass('active');
});

或者，因为在第二次点击一个项目之后，总会有包含这些类的元素项，你也可以简单地使用标志而不是一遍又一遍地搜索元素。

Answer 2

修订后的问题修订答案：

$(document).ready(function() {
    $('ul#myList li:not(.active)').click(function() {
        // user has clicked on an li that does not have class="active"
        $(this).addClass('active');
        $('ul#myList li.active').each(function() {
            // for each li with class="active", remove it and add "active2"
            $(this).removeClass('active').addClass('active2');
        });
    });
});

如果用户点击元素...然后做...（Jquery）

2 个答案: