0

これが私が目指しているものの例です：

liイベントを正しく発生させるために、要素をクラスで装飾する必要はありません。入れ子になったカテゴリ ドロップダウンが複数ある場合はどうなりますか? 物事はすぐに乱雑になります！

また、イベント キャプチャ エリアを離れるとすぐに閉じずにオプションを選択できないようです。

巧妙に作成されたドロップ ダウン ナビゲーション メニューを作成する方法について何か提案はありますか?

4

3 に答える 3

2

セレクターを巧妙に使用するクラスは本当に必要ありません:P

例を使ってフィドルを設定しました。コードは次のとおりです。

HTML:

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li>
            <a href="#">OFFERS</a>
            <ul>
                <li>
                    <a href="#">NEW</a>
                    <ul>
                        <li>YAY!</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">SETTINGS</a></li>
        <li><a href="#">TV's</a></li>
        <li><a href="#">COMPUTERS</a></li>
        <li><a href="#">RICE</a></li>
    </ul>
</nav>​

ご覧のとおり、単一のクラス/ID は必要ありませんでした:P 要素「OFFERS」はドロップダウン メニューを持つ唯一の要素であり、そのメニュー内の要素「NEW」には別の要素があります。

CSS:

li > ul { display: none; }
li li { margin-left: 10px; }

最初のスタイルが重要です。まず、サブメニューを非表示にします。もう 1 つのスタイルは、わかりやすくするためのものです。

jQuery:

$("nav ul li").hover(function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).show();
    }
}, function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).hide();
    }
});​

はい、それと同じくらい簡単です:)hoverメニュー要素を作成するとき、ul直接の子があるかどうかを確認し、ある場合は表示します。メニュー要素を離れるときに、ul直接の子があるかどうかを再度確認し、ある場合は非表示にします。

もちろん、これをスタイルアップし、 any 内の any フロートをクリアする必要がありますli。

于 2012-07-26T13:43:40.553 に答える
1

フローを適切に制御するには、クラスを使用する必要があります。特にあなたの外箱に。

たとえば、私のメニューでは、ulすべてのメニューを含む があり、各メニュー項目はliです。の内部には、サブメニューを含むli別のタイトルとともに、第 1 レベルのタイトルがあります。ul

<ul class="menu">
    <li>
        Item 1
        <ul><!--Further items--></ul>
    </li>
    <li>
        Item 2
        <ul><!--Further items--></ul>
    </li>
</ul>

その後、子セレクターを使用してこれを制御できます。単純にクラスを使用する方が簡単な場合もありますが。

$(".menu > li") //First level items
$(".menu > li > ul") //Submenus

最初のレベルの項目の 1 つをクリックしたときに、メニューを下にスライドさせたいとします。

$(".menu > li").click(function() {
    $this = $(this); //Caching. Not really needed for this example. But anyway :)
    $this.children("ul").slideToggle("fast");
});
于 2012-07-26T13:24:14.430 に答える
0 
$(document).ready( function(){ 
   $("ul.MenuNavi li").mouseover(function(){ 
     $(this).children('ul').slideDown('3000'); 
   }); 
   $("ul.MenuNavi li").mouseleave(function(){                    
     $(this).children('ul').stop(true).slideUp('3000'); 
   }); 
});
于 2014-04-25T11:02:23.863 に答える