单击孩子时,孩子和父母会触发两个不同的事件

山代码

我有这个 html 结构:

<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content" style="display: none;">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div></div>

和这个 jquery 事件来处理下拉视图/隐藏事件:

 $(document).on('click',".dropdownedit", function (e) {
$(this).children('.dropdown-content').css("display", "block");
     });

   $(document).on('mouseover',".dropdown-content", function (e) {
$(this).css("display", "block");
     });

   $(document).on('mouseout',".dropdown-content", function (e) {
$(this).css("display", "none");
   });

此外,我有一个“ocond”类的点击事件,当在下拉菜单中单击一个选项时,它应该关闭下拉内容类:

$(this).parents('.dropdown-content').css("display", "none"); 

但点击后它不会关闭它保持可见。我猜它与以下冲突:

$(document).on('click',".dropdownedit", function (e) {
$(this).children('.dropdown-content').css("display", "block");
     });

由于 dropdownedit 是“ocond”类 div 的父级,并且当有人点击“ocond”类时也会被触发。

当单击子事件时,我尝试添加以防止父事件:

$(".dropdownedit .ocond").click(function(e) {
    e.stopPropagation();

});

但没有成功。我怎样才能解决这个冲突?

奥利弗蹦床

你是对的,命令相互冲突。如果您将click事件降一级,该事件旨在让菜单保持打开状态并添加一个类来覆盖hover显示/隐藏功能,那么您将获得所需的结果而不会发生冲突。

.click()事件附加.dropbtn.nextAll()用于查找.dropdown-content将避免当前冲突。

注意,我使用了.nextAll()它来查找与特定选择器匹配的所有兄弟姐妹,我遵循了这个,.first()以便代码只影响它的第一个实例。这意味着它不太可能干扰其他代码。

我还强烈建议使用.closest()(它将在上游立即找到第一次出现的选择器)而不是.parents()匹配任何。

$(".dropbtn").click( function() { 
  $(this).nextAll(".dropdown-content").first().show();
});

$(".dropdownedit").mouseleave( function() { 
  $(this).find(".dropdown-content").hide();
});

$(".ocond").click( function() { 
  $(this).closest('.dropdown-content').hide(); 
});
.dropdown-content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdownedit">
  <div class="dropbtn">textxyz</div>
  <div class="dropdown-content">
    <div href="#" class="ocond" id="text1">text1</div>
    <div href="#" class="ocond" id="text2">text2</div>
    <div href="#" class="ocond" id="text3">text3</div>
    <div href="#" class="ocond" id="text4">text4</div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

相同点击事件触发父母和孩子

来自分类Dev

反应-防止父母触发孩子的事件触发

来自分类Dev

两个不同父母的孩子可以在React中拥有相同的键吗

来自分类Dev

休眠两个父母一个孩子映射

来自分类Dev

C语言中父母与两个孩子之间的管道

来自分类Dev

C语言中父母与两个孩子之间的管道

来自分类Dev

从两个父母 CSS 获取所有特定的孩子

来自分类Dev

防止在拖动孩子时在父母上发生点击事件

来自分类Dev

父母和孩子中的点击事件

来自分类Dev

让孩子与父母的点击事件

来自分类Dev

父母div有两个孩子。即使不显示其他孩子,也要始终让一个孩子填满父母吗?

来自分类Dev

父母div有两个孩子。即使不显示其他孩子,也总是让一个孩子填满父母吗?

来自分类Dev

遇到两个孩子,即使钥匙不同

来自分类Dev

从第n个孩子两个到父母的角度输出变量

来自分类Dev

如何使用管道从两个孩子向父母发送C语言中的数据?

来自分类Dev

如何用两个孩子扩展相似的父母来创建地图?

来自分类Dev

在单击父类的另一个孩子时如何获得孩子的价值?

来自分类Dev

从不是 jQuery 中祖父母的前两个孩子的父母中选择不是 h3 的孩子节点

来自分类Dev

选择一个父母和所有给定父母或孩子ID的孩子

来自分类Dev

选择一个父母和所有给定父母或孩子ID的孩子

来自分类Dev

jQuery单击事件在最后一个孩子中未触发?

来自分类Dev

如何在与nth-child混合的情况下仅选择父母的前两个孩子?而不是每个第一和第二个孩子

来自分类Dev

两个孩子到边界

来自分类Dev

警告:flattenChildren(...):遇到两个孩子

来自分类Dev

父母和孩子的变量地址相同,但值不同

来自分类Dev

父母和孩子的订单查询

来自分类Dev

Caliburn.micro 父母->孩子和孩子->父母互动

来自分类Dev

当孩子等待父母的设置状态完成时,如何在两个有状态小部件之间使用 FutureBuilder?

来自分类Dev

如何通过单击孩子的父母来显示孩子的活动状态?

Related 相关文章

  1. 1

    相同点击事件触发父母和孩子

  2. 2

    反应-防止父母触发孩子的事件触发

  3. 3

    两个不同父母的孩子可以在React中拥有相同的键吗

  4. 4

    休眠两个父母一个孩子映射

  5. 5

    C语言中父母与两个孩子之间的管道

  6. 6

    C语言中父母与两个孩子之间的管道

  7. 7

    从两个父母 CSS 获取所有特定的孩子

  8. 8

    防止在拖动孩子时在父母上发生点击事件

  9. 9

    父母和孩子中的点击事件

  10. 10

    让孩子与父母的点击事件

  11. 11

    父母div有两个孩子。即使不显示其他孩子,也要始终让一个孩子填满父母吗?

  12. 12

    父母div有两个孩子。即使不显示其他孩子,也总是让一个孩子填满父母吗?

  13. 13

    遇到两个孩子,即使钥匙不同

  14. 14

    从第n个孩子两个到父母的角度输出变量

  15. 15

    如何使用管道从两个孩子向父母发送C语言中的数据?

  16. 16

    如何用两个孩子扩展相似的父母来创建地图?

  17. 17

    在单击父类的另一个孩子时如何获得孩子的价值?

  18. 18

    从不是 jQuery 中祖父母的前两个孩子的父母中选择不是 h3 的孩子节点

  19. 19

    选择一个父母和所有给定父母或孩子ID的孩子

  20. 20

    选择一个父母和所有给定父母或孩子ID的孩子

  21. 21

    jQuery单击事件在最后一个孩子中未触发?

  22. 22

    如何在与nth-child混合的情况下仅选择父母的前两个孩子?而不是每个第一和第二个孩子

  23. 23

    两个孩子到边界

  24. 24

    警告:flattenChildren(...):遇到两个孩子

  25. 25

    父母和孩子的变量地址相同,但值不同

  26. 26

    父母和孩子的订单查询

  27. 27

    Caliburn.micro 父母->孩子和孩子->父母互动

  28. 28

    当孩子等待父母的设置状态完成时,如何在两个有状态小部件之间使用 FutureBuilder?

  29. 29

    如何通过单击孩子的父母来显示孩子的活动状态?

热门标签

归档