0

我有一个菜单条。我计划：

  1. slideDown()当我将鼠标悬停在菜单条上时的子菜单（最初是display: noneDIV ）
  2. 鼠标移出slideUp时隐藏子菜单。

这是代码：

<div id="main_menu" onmouseover="$('#submenu').stop(true,false).slideDown();" onmouseout="$('#submenu').stop(true,false).slideUp();">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>

我试图实现的是，当我将鼠标悬停在子菜单上时，子菜单保持并停止鼠标移出（slideUp()动画。我该如何实现？

注意：鉴于main_menu和sub_menu没有重叠。

更新：这里是jsFiddle

4

2 回答 2

2

一个简单的方法是添加一个父 dom，并将鼠标事件绑定到它。

html

<div id="menu">
    <div id="main_menu">Main Menu</div>
    <div id="submenu" style="display: none">Some submenu contents here</div>
</div>

js

$('#menu').hover(function () {
    $('#submenu').stop(true, false).slideDown();
},

function () {
    $('#submenu').stop(true, false).slideUp();
});

这是 jsfiddle 演示。http://jsfiddle.net/vyDVd/

更新

如果您不想添加父 dom，可以尝试将其作为子菜单submenu放入。main_menu

我在这里更新你的 jsfiddle 演示 http://jsfiddle.net/9KfYr/2/

我添加了 2 个 css 属性#submenu以保持 UI 不变。

position:absolute;
top:30px;

在这里，我建议使用jQuery 提供的.hover()。

于 2013-01-23T04:15:25.933 回答
2

实际上，我能够使用纯 css 实现这一点：

.header-submenu-item {
	display:none;
}
.header-parent-link:hover + .header-submenu-item,
.header-submenu-item:hover {
	display:block;
}
<div class="header-parent-link">Item 1</div>
  <div class="header-submenu-item"></div><!-- Empty submenu -->
<div class="header-parent-link">Item 2</div>
  <div class="header-submenu-item">
    <a href="#">Child Item</a>
    <a href="#">Child Item</a>
    <a href="#">Child Item</a>
  </div>

它不包括 slideDown() 效果，但非常简单。我想，可以使用其他 css 效果来实现滑动。

于 2017-12-21T15:09:42.317 回答