jquery - Jqueryドロップダウンは正常に機能しています...しかし、もっと良いかもしれません

Question

これが私の作業中のドロップダウンメニューです...

http://jsfiddle.net/NAyWQ/7/

それは仕事をし、現時点で私が必要とするほとんどすべての機能です...しかし、少し最適化できると感じています。つまり、境界divなしでこれを行う方法はありますか? また、メニューに戻るとドロップダウンが再起動しますが、大したことではありませんが、この動作を防ぐとよいでしょう。

任意の提案/微調整をいただければ幸いです。

Answer 1

@AndrewMilsonの例から作業すると、これを行うことができます：

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});

ここにあなたのフィドルがあります：http://jsfiddle.net/NAyWQ/11/

Answer 2

http://jsfiddle.net/NAyWQ/11/のようなものを試してください。

これは境界divを使用しないjqueryです。

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});

Answer 3

あなたが持っているjsfiddleは少し面倒で、あまり拡張できません。「div」の代わりに「ul」を使用することをお勧めします。よりクリーンで、CSS でより多くのことができるからです。また、あまりにも多くの ID を使用することは控えたいと思います。これは、常に手動で更新する必要があることを意味します。

これが私がまとめた例です。このメソッドは、ネストされたドロップダウンもサポートしています (必要な場合)。

http://jsfiddle.net/EYv9g/4/

CSS に ">" が表示されます。これは非常に強力なセレクターで、親の直接の子である要素にスタイルを適用できますが、それより下の要素には適用できません。

例えば：

ul.menu > li {background: yellow}

に適用されます...

<ul class="menu">
    <li>me
        <ul>
            <li>but NOT me</li>
        </ul>
    <li><a>me</a>
<ul>