如何打開後點擊下一次點擊模式？

Question

我有類的鏈接，其上升類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。 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(); 
});