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