Question

我有类control的链接，上面有类popup的div。问题是如果这个点击在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。 Fiddle

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();
});

如何在打开后关闭下一次点击模式？

1 个答案: