Javascript - 使整個div可以被識別

Question

我有一個父div元素，並且裏面有一個子div元素。現在有一個子div的點擊處理程序，它帶來了一個下拉菜單（如菜單）。

要求 - 也是在父div的點擊上帶下拉。

注意 - 點擊父div，並觸發childdiv.click（）將無法正常工作，無限循環。

無法執行停止傳播，使下拉式功能無法正常工作。

Answer 1

$(document).ready(function(){ 
 
    
 
    $("#child").click(function(){ 
 
     $("ul").slideUp(); 
 
    }) 
 
    
 
    $("#parent").click(function(){ 
 
     $("#child").trigger("click"); 
 
    }) 
 

 
})

#parent { 
 
    padding: 50px; 
 
    background: red; 
 
} 
 
#child { 
 
    height: 50px; 
 
    background: green; 
 
    color: white; 
 
} 
 
li { 
 
    background: rgba(0,0,255,0.3); 
 
    border: 2px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="parent">Parent 
 
    <div id="child"> 
 
    Child 
 
    <ul id="menu" class="hide"> 
 
     <li>menu1</li> 
 
     <li>menu2</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

試試這個添加父onclick事件處理程序，然後使用event.stopPropagation阻止事件冒泡。

$("#child").click(function(e){ 
    e.stopPropagation(); 
    $("ul").slideToggle(); 
}); 

$("#parent").click(function(e){ 
    $("#child").trigger("click"); 
}); 

CHECK FIDDLE這是你想要的嗎？不確定接下來要做什麼。添加你的代碼會更容易。