0

li アイテムとサブメニュー自体の両方がホバーされていない場合にのみ、サブメニュー div が消えるようにする必要があります。

最初の子ホバーを使用する必要があり、サブメニュー div は子要素ではないため、ここでは CSS ソリューションは機能しません。

フォーラムを検索しましたが、サブメニューが li アイテムの子ではない場合、これに対する解決策が見つかりません。

HTML:

<ul id="top-menu"> 
<li>item 1</li>
<li>item 2</li>
<li>item3</li>
</ul>

<!-- somewhere else in DOM (not directly after or child of menu) -->

<div id="#menu1_expansion">
sub menu1 content
</div>

jQuery:

        $(document).ready(function () {
    $('#top-menu li:nth-child(1)').hover(
    function()
    { 
        $('#menu1_expansion').stop();

        if ($('#menu1_expansion:hidden'))
        { 
            $('#menu1_expansion').show();
        }

    }
);
$('#menu1_expansion').mouseleave( function(){ $('#menu1_expansion').hide(); });
});

CSS:

#menu1_expansion {display:none; position:absolute;}

現在、これによりサブメニューがliアイテムホバーに表示され、サブメニューはmouseleave時に消えますが、それとliアイテムの両方がmouseleaveの場合にサブメニューを非表示にする必要があります-誰かがそれを行う方法をアドバイスできますか? ありがとう。

4

2 に答える 2

0

わかりました、それを機能させる方法を見つけました。他の人に役立つ場合は、コードを以下に示します。

                $(document).ready(function () {
var count = 0;
$('#top-menu li:nth-child(1), #menu_expansion').mouseenter(function(){
    count++;
    $('#menu_expansion').show();
}).mouseleave(function(){
    count--;
    if (count == 0) { 
        $('#menu_expansion').hide();
    }
});


});
于 2013-02-04T18:51:51.570 に答える
0

#menu1_expansion を 1 回だけ表示して、表示したままにしたい場合: ホバーの代わりに mouseover() を試してください。

ホバー機能は、オブジェクトをホバーしたときにのみトリガーされ、要素をポイントしていないときはトリガーされません。

于 2013-02-03T21:03:33.160 に答える