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

问题描述

我有一个简单的 div 结构(见下文).我想要做的就是当 div idinterviewer-Button"被点击时，下面的 div 应该出现，当 div idelt"被点击时，从 idparent0"到最后的 div 应该隐藏.

显示部分工作正常.但是，当我试图隐藏时，它并没有隐藏.当我单击 div idelt"时，会抛出警报消息hh"(见下文)！！奇怪的.有关如何隐藏此信息的任何帮助?

面试官<div id = "parent0">薇薇<div id = "parent1">家长<div id = "elt">关闭

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

解决方案

您需要停止内部元素处理程序中单击事件的传播.如果没有，父级的处理程序也将被调用.有关详细信息，请参阅 jQuery 事件对象.

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

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.

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>

解决方案

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