Question

jquery / javascript很新，但精通html / css ......

我有一个类.item的兄弟姐妹列表。每个都是地图上的一个图钉。我想做三件事：

点击时打开/关闭切换，使用我使用CSS操作的“活动”类
当一个.item打开时，单击另一个并关闭它并打开新的
在.item外部点击时，它会关闭

我已经看过一些使用ID的例子，但希望我可以使用.item类，或者也许是父ID - #map。

我使用toggleClass（）

实现了第一个点

$('#map .item').click(function() {
    $(this).toggleClass('active');
});

简化的html：

<div id="map">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

感谢您的帮助。

Answer 1

如果我理解正确，这应该有效：

$(function () {
    $('#map .item').click(function(evt) {
        evt.stopPropagation(); //stops the document click action
        $(this).siblings().removeClass('active');
        $(this).toggleClass('active');
    });


    $(document).click(function() {
        $('#map .item').removeClass('active'); //make all inactive
    });
});

您可以在此处了解有关此事件冒泡的更多信息http://api.jquery.com/event.stopPropagation/

Answer 2

这样的事情也会起作用：

$("#map .item").click(function(e) {
    var self = $(this)[0];
    $(".item").each(function(index) {
        if (self == $(this)[0])
            $(self).addClass("active");
        else
            $(this).removeClass("active");
    });
});
$("body").click(function(e) {
    if (!e.target.id == "map" || !$(e.target).parents("#map").size()) { 
        $(".item").removeClass("active");
    }
});

Here is a fiddle工作的例子。

单击外部元素时，jquery类列表切换为关闭

2 个答案: