在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")来获取事件源元素的子元素。

<强> Live Demo

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

编辑以便在点击.modal-inside时隐藏，您可以使用mouseup

<强> Live Demo

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