Mouseover Mouseleave - 子子菜单答案

【问题标题】：Mouseover Mouseleave - Child SubmenuMouseover Mouseleave - 子子菜单
【发布时间】：2016-04-05 07:51:25
【问题描述】：

我使用 ul 完成了以下菜单

<ul class="offerings">
   <li><a>NO SubMenu</a></li>
   <li><a>With SubMenu</a>
      <ul id="submenu">
        <li><a href="">SubMenu 1</a></li>
        <li><a href="">SubMenu 2</a></li>
      </ul>
   </li>

当我使用 Submenu 选项将鼠标悬停在 <a>With SubMenu</a> 上时，应显示相应的子菜单 (id=submenu)，并且当我在 <a>With SubMenu</a> 上执行 MOUSEOUT 时，应隐藏子菜单。

使用 mouseenter 可以轻松实现悬停，但问题在于 <li><a>With SubMenu</a> 上的 mouseleave。

问题：

如果子菜单打开并且鼠标在子菜单框内移动 - 在<a>With SubMenu</a> 上触发 Mouseout 事件导致子菜单隐藏。如何应对这种情况？

我是否应该尝试鼠标坐标，然后忽略用 Mouseleave 编写的其余函数。

https://jsfiddle.net/vkfc9jwc/6/

【问题讨论】：

为什么不通过 css 使用:hover？

标签： javascript jquery html css menu

【解决方案2】：

如果您想使用 jQuery 执行此操作，您只需将事件绑定到 li 而不是 a-Tag。但是您应该考虑 Jai 的答案。

$('.offerings').find('>li').on('mouseover',function(e){
    $("#eventFired").text('Fired XXX');
});

$('.offerings').find('>li').on('mouseout',function(e){
    $("#eventFired").text('mouseout Fired on A');
});

你的小提琴看起来像这样：https://jsfiddle.net/vkfc9jwc/7/

【讨论】：

【解决方案3】：

不需要为此使用脚本，只需使用:hover 规则

.offerings ul {
  display: none;
}
.offerings li:hover ul {
  display: block;
}

<ul class="offerings">
  <li><a>NO SubMenu</a>
  </li>
  <li><a>With SubMenu</a>
    <ul id="submenu">
      <li><a href="">SubMenu 1</a>
      </li>
      <li><a href="">SubMenu 2</a>
      </li>
    </ul>
  </li>
</ul>
<label id="eventFired">Class</label>

出于某种原因，如果您想使用脚本，请使用 mouseenter 和 mouseleave 事件。 mouseover 和 mouseout 事件会冒泡，这就是为什么当子元素悬停时会触发事件。

您可以使用 .hover() 函数，它是一种实用方法来添加 mouseenter 和 mouseleave 处理程序

$('.offerings li:has(ul)').hover(function(e) {
  $(this).children('ul').toggle(e.type == 'mouseenter');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="offerings">
  <li><a>NO SubMenu</a>
  </li>
  <li><a>With SubMenu</a>
    <ul id="submenu">
      <li><a href="">SubMenu 1</a>
      </li>
      <li><a href="">SubMenu 2</a>
      </li>
    </ul>
  </li>
</ul>
<label id="eventFired">Class</label>

【讨论】：

【解决方案4】：

你试过JQuery Hover method吗？

$( "#submenu li" ).hover(
  function() {
    $("#eventFired").text('Sub Menu LI HOVER');
  }, function() {
    $("#eventFired").text('Sub Menu LI UN-HOVER');
  }
);

$( "#submenu" ).hover(
  function() {
    $("#eventFired").text('Sub Menu HOVER');
  }, function() {
    $("#eventFired").text('Sub Menu UN-HOVER');
  }
);

【讨论】：

【解决方案5】：

你可以这样试试：

$('.offerings').find('>li').on('mouseover',function(e){
  $("#submenu").css('display', "block");
});

$('.offerings').find('>li').on('mouseout',function(e){
  $("#submenu").css('display', "none");
});

【讨论】：

【解决方案6】：

您也可以尝试这个，但正如@Jai 回答的那样，这可以通过 css 轻松完成

    $('.offerings').find('> li > a').on('mouseover',function(e){
    $("#eventFired").text('Fired XXX');
});

$('.offerings').find('> li > ul > li > a').on('mouseout',function(e){
    $("#eventFired").text('mouseout Fired on A');
});

【讨论】：

【解决方案7】：

我会为您推荐 jQuery 库中的 hover() 函数。首先，您需要 google 一个 jQuery 库并将其添加到 HTML 文档中项目的 <head> 部分。这将使 jQuery 加载您的内容。这是重要的一步，因为我要向您展示的脚本将无法正常工作。第二步是在加载 jQuery 库后用 jQuery 编写实际脚本。函数 hover() 分为两部分。以 mouse-enter 事件开始的函数是悬停函数的第一部分，第二部分是从 mouse-out 事件开始的函数。这是有效的 JSFiddle https://jsfiddle.net/h9ocupsh/1/，它向您展示了 hover() 的功能。

所以实际上，对于你来说，悬停功能看起来像这样：

$(document).ready(function(){
    $(".hoverable").hover(function(){
        $("#submenu").show();
    }, function(){
        $("#submenu").hide();
    });
});

重要的是识别触发悬停功能的<li>元素。为此，我使用了“hoverable”类，您可以将其添加到您的<li> 元素中，该元素会触发您的悬停功能以使我的脚本正常工作。如果您想为触发<li> 元素添加不同的类或ID，您只需将$(".hoverable") 重写为您想要的任何内容。例如，如果您想为触发悬停功能的元素使用 id "hover"，则需要将其重写为：$("#hover") ...我希望您能参与其中。只要记住使用“。”用于类，“#”用于 id - 就像在 CSS 中一样。

然后，如果您显示的子菜单未按您希望的方式显示，您需要对其进行定位。

我为您搜索了 jQuery 库，.. 您需要做的就是在 jQuery 脚本之前将它包含在您的 HTML 文件中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

希望对你有帮助。

编辑：

可选，您可以将时间添加到show() 和hide() 函数以减慢或加快显示或隐藏的速度。它看起来像这样：show(400)。该值以毫秒为单位。

编辑 2：

<ul id="submenu"> 的显示值在 CSS 中必须为“none”。我建议您在实现 jQuery 库后将我为您编写的脚本添加到 <head> 部分。之后就可以正常工作了

【讨论】：