Question

我使用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>

当我将鼠标悬停在<a>With SubMenu</a>子菜单选项上时，相应的子菜单（id =子菜单）应显示AND当我在<a>With SubMenu</a>上执行MOUSEOUT时子菜单应该隐藏。

使用mouseenter很容易实现悬停，但问题在于<li><a>With SubMenu</a>上的mouseleave。

问题：

如果子菜单已打开且鼠标在子菜单框内移动 - 在<a>With SubMenu</a>上触发Mouseout事件，导致子菜单隐藏。如何解决这个问题？

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

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

Answer 1

这样的事情也可以用css实现：

＆＃13;

ul ul{display:none;} /* hide the sub-list */

li:hover ul{display:block;} /* on hover of li show ul if "li" has */

＆＃13;

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

＆＃13;

Answer 2

如果您想使用jQuery执行此操作，只需将事件绑定到li而不是a - 标记。但你应该考虑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/

Answer 3

无需使用脚本，只需使用:hover规则

即可

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以使用.hover（）函数，它是一种实用工具方法，可以添加mouseenter和mouseleave处理程序

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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');
  }
);

Answer 5

您可以尝试这样：

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

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

Answer 6

我会为您推荐jQuery库中的hover()函数。首先，你需要谷歌一个jQuery库，并将其添加到HTML文档的项目的<head>部分。这将使jQuery加载您的内容。这是非常重要的一步，因为我要向你展示的剧本不会起作用。第二步是在加载jQuery库后在jQuery中编写实际脚本。函数hover（）分为两部分。从鼠标输入事件开始的函数是悬停函数的第一部分，第二部分是从鼠标输出事件开始的函数。这是工作中的JSFiddle https://jsfiddle.net/h9ocupsh/1/，它向您展示了hover（）的功能。

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

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

重要的是识别触发悬停功能的<li>元素。要做到这一点，我使用了类＆＃34; hoverable＆＃34;您可以将其添加到触发悬停功能的<li>元素中，以使我的脚本正常工作。如果您想为触发<li>元素添加不同的类或ID，则只需将$(".hoverable")重写为您想要的任何内容。例如，如果您想使用id＆＃34; hover＆＃34;对于触发悬停功能的元素，您需要重新编写它：$("#hover") ...我希望您能够进入它。只记得使用＆＃34;。＆＃34;对于班级和＆＃34;＃＆＃34;对于id - 就像在CSS中一样。

如果您显示的子菜单没有以您希望的方式显示，则需要对其进行定位。

我为你搜索了jQuery lib，你需要做的就是在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">的显示值必须为＆＃34;无＆＃34;在CSS中。我建议您在实现jQuery lib之后将我为您编写的脚本添加到<head>部分。那之后就可以了。

Answer 7

你可以试试这个但是在@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');
});

Mouseover Mouseleave - 子子菜单

7 个答案: