1

我有一个菜单，我试图显示和隐藏每个选项的子菜单。HTML结构如下：

<a href="/page" class="menu-option" rev="1">Option 1</a>

<ul id="submenu-1" class="submenu" style="display:none">
    <li><a href="/page">Option A</a></li>
    <li><a href="/page">Option C</a></li>
</ul>

<a href="/page" class="menu-option" rev="2">Option 2</a>

<ul id="submenu-2" class="submenu" style="display:none">
    <li><a href="/page">Option C</a></li>
    <li><a href="/page">Option D</a></li>
</ul>

在 JQuery 我有这个代码：

$(".menu-option").mouseover( function() {

    var id_option = $(this).attr("rev");

    $("#submenu-" + id_option).fadeIn("fast");

}).mouseout( function() { 

});

我不知道在“mouseout()”事件中该做什么，因为：

1）如果用户将鼠标放在选项菜单中，然后将鼠标放在该选项的子菜单上，则子菜单必须保持打开状态，当用户将鼠标移出子菜单时，如果用户没有，则必须关闭子菜单不要将鼠标放回打开它的选项菜单。

2) 如果用户将鼠标放在选项菜单中，然后将鼠标放在其他选项菜单上，则必须关闭该选项的子菜单。

任何人都可以帮我实现这个“mouseout（）”事件吗？

4

2 回答 2

4

这应该可以解决问题：

在这里演示

CSS

.menu-container {
    float: left;
    display: block;
    width: 150px;
}

.submenu {
    display: none;
}

​</p>

HTML

<ul id="submenu-1" class="menu-container">
    <li>
        <a href="/page" class="menu-option" rev="1">Option 1</a>
        <ul class="submenu">
            <li><a href="/page">Option A</a></li>
            <li><a href="/page">Option C</a></li>
        </ul>
    </li>
</ul>

<ul id="submenu-2" class="menu-container">
    <li>
        <a href="/page" class="menu-option" rev="2">Option 2</a>
        <ul class="submenu">
            <li><a href="/page">Option C</a></li>
            <li><a href="/page">Option D</a></li>
        </ul>
    </li>
</ul>​

JS

//Menu system
$('.menu-container li').hover(function() {
    //show its submenu
    $('ul', this).fadeIn(100);

}, function() {
    //hide its submenu
    $('ul', this).fadeOut(100);
});
于 2012-05-31T21:18:39.833 回答
0 
$(".menu-option").mouseover( function() {    
     $(this).next("ul").fadeIn("fast");
  }).mouseout( function() { $(this).next('ul').fadeout(); });
于 2012-05-31T20:55:12.667 回答