0

新しい問題があります。joomla Web サイトの jquery を使用してサブメニューを作成したいと考えています。メニューは次のようになります。

<ul id="submenu">
    <li><a href="#">Link</a></li>
    <li class="parent">
        <a href="#">Submenu 1</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li class="parent">
        <a href="#">Submenu 2</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
        <li class="parent">
        <a href="#">Submenu 3</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

したがって、すべての要素に子要素があるわけではありません。どうやってやるの？私はこのように試しました：

// hide all elements onload 
$("#submenu > li.parent > ul").hide();

$("#submenu li.parent").hover(function() {
    $(this).find("ul").slideDown("slow");
});

しかし、ユーザーがマウスでメニューから離れた場合、サブメニューを閉じる方法がわかりません。サブメニューを表示する前に、他のオープンエンドメニューを閉じたいと思います。誰でも私を助けることができますか？

ありがとう

4

2 に答える 2

1

使用できますmouseenter/mouseleave

$("#submenu li.parent").mouseenter(function() {
     $(this).find("ul").slideDown("slow");
}).mouseleave(function() {
     $(this).find("ul").slideUp("Slow");
});​

しかし、純粋な CSS ソリューションを使用する方がよいでしょう。

http://jsfiddle.net/QEWvm/

CSS3 サンプル ソリューション: http://jsfiddle.net/qzP7s/

于 2012-11-16T15:33:45.743 に答える
0

jQuery ソリューションを使用する場合は、少なくとも の.stop()前にを追加して、.slideUp()アニメーションがキューに入る可能性のあるマウスの動きを考慮に入れることをお勧めします。したがって、このコードは最後に

    $("#submenu li.parent").mouseenter(function() {
     $(this).find("ul").slideDown("slow");
}).mouseleave(function() {
     $(this).find("ul").stop().slideUp("Slow");
});​

ここでフィドルhttp://jsfiddle.net/QEWvm/4/

ただし、このアプローチの問題は、スクリーン リーダーが無視する.hide()セットとしてアクセスできないことです。display:none

より良い解決策 (アニメーションなしで生活できる場合、またはアニメーションを理解するために CSS3 を使用したい場合) は、ポジショニングと疑似クラスを使用して、このようなものと同様のことを達成することです

#submenu > li.parent > ul { position: absolute; left: -9999px; }

#submenu li.parent:hover ul {
  left: 90px;          
}

このフィドルhttp://jsfiddle.net/QEWvm/5/は、それが機能していることを示しています。

于 2012-11-16T15:48:52.687 に答える