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

Question

对jquery/javascript很陌生，但精通html/css。。。

我有一个class.item的兄弟姐妹列表。每个都是地图上的一个别针。我想实现3件事：

• 点击时打开/关闭切换，使用一个我用CSS操作的类"active">
• 当一个.项目打开时，单击另一个以关闭它并打开新项目
• 在.项目外部单击时，它将关闭

我看到了一些使用id的例子，但希望我可以只使用.item类，或者使用父id-#映射。

我已经使用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");
}
});

这是一个小提琴的例子。