1

拿这个jsfiddle。如果您单击蓝色方块，则会出现一个带有紫色子方块的红色方块（如果您是色盲，请道歉）：

    $('#holder').click(function(){
        $(this).children('.parent').show();
    });

这工作正常。当您单击紫色子方块时，红色父方块应该被隐藏：

    $('.child').click(function(){
        $(this).parent().hide();
        console.log($(this).parent().css('display'));
    });

这不起作用，尽管控制台display:none为父元素返回了一个 css 值。我想知道是否有人可以解释为什么父母没有被隐藏，以及可能有什么替代方法来隐藏它？

HTML

<div id="holder">
    <div class="parent">
        <div class="child">

        </div>
    </div>
</div>

CSS

#holder {
    height: 50px;
    width:50px;
    background-color: blue
}
.parent {
    position:fixed;
    top:100px;
    left:200px;
    display:none;
    width:200px;
    height:200px;
    background-color:red
}
.child {
    position:absolute;
    width:50px;
    height:50px;
    background-color:purple
}

JS

$(function(){
    $('#holder').click(function(){
        $(this).children('.parent').show();
    });
    $('.child').click(function(){
        $(this).parent().hide();
        console.log($(this).parent().css('display'));
    });

});
4

4 回答 4

8

您遇到的问题是，在您隐藏元素之后，事件传播到#holder，它是.parent元素的父级，因此您定义的事件处理程序#holder再次显示该元素。

在事件处理程序的末尾添加return false以防止传播：

    $('.child').click(function(){
        $(this).closest('.parent').hide();
        console.log($(this).parent().css('display'));
        return false;
    });

示范

于 2013-09-06T18:35:39.053 回答
1

小提琴：http: //jsfiddle.net/BS6Es/1/

$(function(){
    $('#holder').click(function(){
        $(this).children('.parent').show();
    });
    $('.child').click(function(e){
       $(this).parent().hide();
       return false;    // important!        
    });        
});

你必须返回假。玩得开心！

更新：如前所述，您可以使用closest()而不是parent().

于 2013-09-06T18:38:52.217 回答
1

您可以使用 stopPropagation，它会在您单击时阻止其他事件发生。

$(function(){
    $('#holder').click(function(){
        $(this).children('.parent').show();
    });
    $('.child').click(function(e){
        e.stopPropagation();
        $(this).parent().hide();
    });        
});

你可以在这里看到它：http: //jsfiddle.net/BS6Es/2/

于 2013-09-06T18:46:02.247 回答
-2

采用$(this).closest('div.parent').hide()

于 2013-09-06T18:43:52.133 回答