jQuery 中的显示/隐藏脚本仅显示最后一个隐藏的 div

Question

我的简单脚本在这里

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(".showHide").children('.showHide').toggle();
});
$(".modal-inside").click(function (e) {
    e.stopPropagation();
});
$(document).bind('keydown', function(e) { 
        if (e.which == 27) {
            $(".showHide").children('.showHide').hide();
        }
    });

它只显示

最后一个隐藏的div，但我希望它只显示直接的孩子。

http://jsfiddle.net/yqaxqq6m/

Answer 1

您需要$(this)而不是$(".showHide")来获取事件源元素的子元素。

现场演示

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(this).children('.showHide').toggle();
});

编辑以在单击外侧时隐藏 .modal-inside 您可以使用mouseup

现场演示

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(this).children('.showHide').toggle();
});
$(".modal-inside").click(function (e) {
    e.stopPropagation();
});
$(document).on('mouseup',  function(e) {  
    if (e.target.className != "modal-inside") {
        $(".showHide").children('.showHide').hide();
    }
});