Question

我希望仅在鼠标位于父li而非小孩ul或li时触发悬停。这是我的代码无效

$('#menu-header-menu').on("mouseenter", ".menu-item:not(.menu-item .sub-menu)", function() {
 $(this).find(".sub-menu").slideToggle();
});

这是我的HTML代码

<ul id="menu-header-menu" class="menu" style="display: block;">
<li id="menu-item-1549" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1536 current_page_item menu-item-1549"><a href="myurl">Home</a></li>
<li id="menu-item-1627" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1627"><a href="myurl">Photo 1</a>
    <ul class="sub-menu" style="display: none;">
    <li id="menu-item-1631" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1631"><a href="myurl">Page1</a></li>
    <li id="menu-item-1630" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1630"><a href="myurl">Page 2</a></li>
    </ul>
</li>
<li id="menu-item-1626" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1626"><a href="myurl">Photo 2</a>
    <ul class="sub-menu" style="display: block;">
    <li id="menu-item-1633" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1633"><a href="myurl">Page1</a></li>
    <li id="menu-item-1632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1632"><a href="myurl">Page 2</a></li>
    </ul>
</li>
<li id="menu-item-1548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1548"><a href="myurl">Project</a></li>
</ul>

非常感谢您的帮助。谢谢！

Answer 1

您始终可以阻止在子元素上传播事件来实现：

您可以在MDN上阅读有关事件传播的更多信息，但一般的想法是所有事件都在DOM树中向上传播，因此即使在子元素上发生的事件也会在其每个父元素上触发。

＆＃13;

$('.parent').on('mouseenter', function () {
  console.log('mouseenter');
});

$('.child').on('mouseenter', function (e) {
  e.stopPropagation();
});

＆＃13;

.parent {
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background-color: #999;
}

.child > .child {
  width: 100px;
  height: 100px;
  background-color: #333;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <div class="child">
    </div>
  </div>
</div>

＆＃13;

干杯。：）

Answer 2

如果您不希望您的孩子事件冒泡到父母，您需要在子事件上使用stopImmediatePropagation()，在这种情况下是悬停。它可能看起来像这样：

$('.child').on('hover',function(e){
    e.stopImmediatePropagation();
});

Answer 3

如果您不想停止事件传播，可以将与事件处理程序（this）相关的元素与事件开始冒泡的元素（ev.target）进行比较。如果它们相同，则您知道this是鼠标光标悬停的第一个元素：

$("#without-if").find("ul,li").hover(function (ev) {
  $(this).toggleClass("hover");
});
$("#with-if").find("ul,li").hover(function (ev) {
  if (this === ev.target) {
    $(this).toggleClass("hover");
  }
});

div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 120px;
}
ul, li {
  list-style: none;
  padding: 30px 0 0 0;
}
ul {
  background: blue;
}
li {
  background: yellow;
}
.hover {
  background: red;
}
#without-if * {
  padding-left: 30px;
}
#with-if * {
  padding-right: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="without-if"><ul><li><ul><li></li></ul></li></ul>Without IF</div>
<div>Hover the small yellow square.</div>
<div id="with-if"><ul><li><ul><li></li></ul></li></ul>With IF</div>

将鼠标悬停在父元素而非子元素上

3 个答案: