0

私は垂直メニュー アコーディオンを持っており、以下のマークアップに示すように展開し、ホバー時に子を表示します。

<ul>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
</ul>

例を次に示します: http://jsfiddle.net/A8CPd/

問題は、マウスを子の上に置いたときにホバー状態が保持されないことです。

4

1 に答える 1

1

ホバーリスナーをアタッチする方法に問題があります。リスト項目内のアンカーにのみリスナーをアタッチします。その後、サブメニュー項目の 1 つにカーソルを合わせようとすると、必然的にアンカー要素から離れてしまい、メニューが再び折りたたまれます。

代わりに、これがあなたが探しているものだと思います：

$("#accordion > li").hover(function(){
    $(this).find("ul").slideToggle(300);
});

ここで、サブメニュー項目も含む li 要素全体にリスナーをアタッチします。したがって、それらをホバーしている間もメニューは開いたままになります。

フィドルも更新しました：http://jsfiddle.net/A8CPd/32/

于 2012-11-14T15:06:01.907 に答える