javascript - Show and hide the submenu of a menu with more than one option using JQuery - Stack Overflow

admin管理员组

文章数量:1414628

I have a menu and i am trying to show and hide the submenu of each option. The HTML struct is the following:

<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>

In JQuery i have this code:

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

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

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

}).mouseout( function() { 

});

I don't know what to do in the "mouseout()" event because of this:

1) If the user put the mouse in the option menu and after this put the mouse over the submenu of this option, the submenu must keep open and when the user put the mouse out of the submenu, it must be closed if the user doesn't put the mouse back at the option menu that opened it.

2) If the user put the mouse in the option menu and after this put the mouse over other option menu, the submenu of this option must be closed.

Anybody can please help me to implement this "mouseout()" event?

I have a menu and i am trying to show and hide the submenu of each option. The HTML struct is the following:

<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>

In JQuery i have this code:

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

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

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

}).mouseout( function() { 

});

I don't know what to do in the "mouseout()" event because of this:

1) If the user put the mouse in the option menu and after this put the mouse over the submenu of this option, the submenu must keep open and when the user put the mouse out of the submenu, it must be closed if the user doesn't put the mouse back at the option menu that opened it.

2) If the user put the mouse in the option menu and after this put the mouse over other option menu, the submenu of this option must be closed.

Anybody can please help me to implement this "mouseout()" event?

• javascript
• jquery
• animation
• menu
• submenu

Share Improve this question Follow edited May 31, 2012 at 21:00 Marcio Mazzucato asked May 31, 2012 at 20:53 Marcio MazzucatoMarcio Mazzucato 9,3151111 gold badges7070 silver badges8181 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This should do the trick:

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

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

本文标签： javascriptShow and hide the submenu of a menu with more than one option using JQueryStack Overflow