在jquery中隱藏父divs

Question

我有一個簡單的div結構（見下文）。我試圖做的是當div id「interviewer-Button」被點擊時，下面的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'); 
    }); 
});