Question

拿这个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'));
    });

});

Answer 1

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

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

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

Demonstration

Answer 2

小提琴：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()。

Answer 3

您可以使用stopPropagation，这会在您点击时停止发生其他事件。

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

您可以在此处查看：http://jsfiddle.net/BS6Es/2/

Answer 4

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

jquery父隐藏不工作

4 个答案: