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 に答える