Question

我有一个父div元素，在其中有一个子div元素。现在有一个子div的点击处理程序，它带有一个下拉菜单（如菜单）。

要求 - 也是点击父div的下拉列表。

注意 - 单击父div时，激活childdiv.click（）将无效，无限循环。

无法进行停止传播，使下拉列表无法正常工作。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试添加父onclick事件处理程序，然后使用event.stopPropagation来停止事件冒泡。

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

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

CHECK FIDDLE这就是你想要的吗？不确定下一步你想做什么。添加代码会更容易帮助。

Javascript - 使整个div可点击

2 个答案: