Question

我有这个html结构：

class MyModelForm(forms.ModelForm):
    [...]
    def __init__(self, *args, **kwargs):
        super(MyModelForm, self).__init__(*args, **kwargs)
        self.fileds['type'].queryset=Status.objects.all().order_by('custom_order')

和此jquery事件以处理下拉视图/隐藏事件：

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

此外，我具有“ ocond”类的单击事件，当在下拉菜单中单击选项时，该事件应关闭下拉内容类：

 $(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");
   });

，但单击后仍未关闭。我认为这与以下内容冲突：

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

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

我尝试添加以防止在单击子事件时发生父事件：

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

}）;

但没有成功。我该如何解决这个冲突？

Answer 1

是的，命令相互冲突。如果您将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>

Answer 2

我明白了！ ...以防万一有人感兴趣：

我刚刚添加了e.stopPropagation（）;在子事件之后（本例中为所有第二次click事件操作之后），以防止父事件触发事件。

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

2 个答案: