在Jquery中隐藏父div

Question

我有一个简单的div结构(见下文).所有我想要做的就是当点击div"面试者 - 按钮"时,下面的div应该出现,当div id"elt"被点击时,id为"parent0",直到结尾应该隐藏.

显示部分工作正常.但是,当我试图隐藏时,它只是不隐藏.当我点击div id"elt"时,警告消息"hh"(见下文)被抛出!! 奇怪的.有关如何隐藏这个的任何帮助？

<div id = "interviewer-Button">
   Interviewer
   <div id = "parent0">
         Viv
          <div id = "parent1">
                Parent
                <div id = "elt">
                     Close
                 </div>

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


<script>
$(document).ready(function() {
    $("#parent0").hide();   
    $("#interviewer-Button").click(function() { alert("hh");$("#parent0").show(); });
    $("#elt").click( function () {
            $(this).parent().parent().hide();
         });                
     });
</script>

Answer 1

您需要停止在内部元素的处理程序中传播click事件.如果没有它,也将调用父级的处理程序.有关更多信息,请参阅jQuery事件对象.

$("#elt").click( function (e) {
    e.stopPropagation();
    $(this).parent().parent().hide();
});