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 event object。

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

Answer 2

不适用上述的组合。感谢两位成员的回答。很有帮助。

            jQuery(function ($) {
                $('.coffee-strength p span').each(function () {
                    var string = $.trim($(this).text());
                    if(string!="22"){
                        $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
                    }else{
                        $(this).parent().parent().hide();    
                    }
                    });

            });

            </script>

Answer 3

您还可以利用事件传播并仅附加一个事件：

$(function() {
  $("#parent0").hide(); 
  $("#interviewer-Button").on('click', function(e){
    $(this).find('#parent0').toggle(e.target.id !== 'elt');
  });
});

在Jquery中隐藏父div

3 个答案: