javascript - 使用 JQuery 显示和隐藏具有多个选项的菜单的子菜单

Question

我有一个菜单，我试图显示和隐藏每个选项的子菜单。 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()”事件？

Answer 1

这应该可以解决问题:

Demo Here

CSS

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

.submenu {
    display: none;
}

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