在背景点击隐藏div

Question

我有一系列div在链接点击上显示。当我发现我试图让他们在背景点击时关闭，同时保持他们能够让不同的div在点击不同的链接时相互替换。

JS在这里小提琴：http://jsfiddle.net/t593pyg9/3/

$(document).ready(function () {
    $('.toggle').hide();
    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide();
        elem.toggle();
    });
});

Answer 1

聆听整个文档的点击，以防止由于事件传播而点击链接后关闭“弹出窗口”，将return false;添加到show click listener。

$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.toggle')
    $('.toggle').not(elem).hide();
    elem.toggle();
    return false;
});
$(document).on('click',function(e){
    $('.toggle').hide();
});

Fiddle

---

更新

如果你想阻止弹出窗口点击它时隐藏它，请添加：

$('.toggle').on('click', function (e) {
    return false;
});

New Fiddle