在Jquery中隐藏父div [英] Hiding parent divs in Jquery

问题描述

我有一个简单的div结构（见下文）。我试图做的是当点击div idinterviewer-Button时，下面的div应该出现，并且当div idelt被点击时，从idparent0开始div到最后应该隐藏。

I am having a simple div structure ( see below ). All I am trying to do is when the div id "interviewer-Button" is clicked the following div's should appear and when the div id "elt" is clicked divs from id "parent0" till the end should hide.

显示部分正常工作。但是，当我试图隐藏时，它不会隐藏。当我点击div idelt时，警告消息hh（见下文）会被抛出！奇怪的。任何帮助如何隐藏这个？

The display part works fine. However, when I try to hide, it just does NOT hide. When i click on the div id "elt" the alert message "hh" (see below) gets thrown!! Weird. Any help on how to hide this?

<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>

推荐答案

您需要停止传播click事件内部元素的处理程序。如果没有这样的话，父类的处理程序也会被调用。请参阅 jQuery事件对象以获取更多信息。

You need to stop propagation of the click event in the handler for the inner element. Without that the handler for the parent will also be invoked. See the jQuery event object for more info.

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

这篇关于在Jquery中隐藏父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！