0

controlclassで div が上昇するclass とのリンクがありpopupます。このクリックがdivの外にある場合、次のクリックでこのdivを閉じる方法に問題がありますか? 現時点では、この 2 つのイベントが同時に発生するため、モーダルは表示されません。次のクリックでのみこのモーダルを閉じる方法。

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');
    });
});
4

1 に答える 1

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();
});
于 2013-05-03T12:31:58.243 に答える