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

Answer 2

$(".menu-option").mouseover( function() {    
     $(this).next("ul").fadeIn("fast");
  }).mouseout( function() { $(this).next('ul').fadeout(); });

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

2 个答案: