Javascript-使整个div可clicable

Question

我有一个父div元素，其中有一个子div元素。现在有了子div的点击处理程序，它带来了一个下拉列表（就像菜单一样）。

需求-是在单击父div时也显示下拉列表。

注意-单击父div，并启动子div。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这是你想要的吗？不确定下一步要做什么。添加代码会更容易帮助您。