jquery - 打开后如何在下次单击时关闭模态？

Question

我有与 class 的链接，control其中 div 与 class 上升popup。问题是如果此点击在 div 之外，如何在下次点击时关闭此 div？目前这两个事件同时触发，因此模式不会出现。如何仅在下次单击时关闭此模式。

jQuery(document).ready(function(){
    jQuery('body').on('click', function(event){
        var menu_popup = jQuery('div.popup[data-open-status="true"]');

        if(menu_popup.has(event.target).length === 0)
            menu_popup.hide().attr('data-open-status', 'false');
    });

    jQuery('a.control').click(function(event){
        event.preventDefault();
        jQuery('div.popup').show().attr('data-open-status', 'true');
    });
});

Answer 1

您需要确保单击事件不会冒泡 dom。小提琴

jQuery(document).ready(function () {
    jQuery("a.control").click(function (e) {
        jQuery("div.popup").show().attr('data-open-status', 'true');
        e.preventDefault();
        e.stopImmediatePropagation();
    });

    jQuery(document).click(function (e) {
        var menu_popup = jQuery('div.popup[data-open-status="true"]');
        if (menu_popup.has(e.target).length === 0) menu_popup.hide().attr('data-open-status', 'false');
    });

    // Add a stopPropagation so that when a user clicks in the div, the event doesn't bubble up to "document"
    jQuery("div.popup").click(function (e) {
        e.stopPropagation();
    });
});

但在我看来，您可以省略数据属性：http: //jsfiddle.net/25xFu/1/

$("a.control").click(function (e) {
    $("div.popup").slideToggle("fast");

    e.preventDefault();
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if ($("div.popup").is(":visible") && !$("div.popup").is(e.target)) {
        $("div.popup").slideUp("fast");
    }
});

$("div.popup").click(function (e) {
    e.stopPropagation();
});