Question

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

slideDown()当我将鼠标悬停在菜单条上时，子菜单（原display: none DIV）
鼠标移出时，按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

Answer 1

您可以轻松地添加父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 demo。 http://jsfiddle.net/vyDVd/

<强>更新

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

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

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

position:absolute;
top:30px;

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

Answer 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效果可以实现滑动。

jQuery：slideDown（），slideUp（）和stop（）

2 个答案: