1

これはここでの私の最初の投稿です。私はしばらく探していましたが、まだ私のニーズに合った解決策に出くわしていません. しかし、ここに行きます：

私は Big Cartel CMS を使用してサイトを構築しており、初めて jQuery を掘り下げました。必要に応じて、下にサブメニューを表示する水平で中央のナビゲーション メニューを作成しようとしています。html と CSS には問題ありませんが、jQuery に苦労しています。

マークアップは次のとおりです。

<nav>
    <ul id="mainNav">
        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul id="option1Nav">
                <li><a href="somewhere">Option 1 Link 1</a></li>
                <li><a href="somewhere">Option 1 Link 2</a></li>
                <li><a href="somewhere">Option 1 Link 3</a></li>
                <li><a href="somewhere">Option 1 Link 4</a></li>
                <li><a href="somewhere">Option 1 Link 5</a></li>
            </ul>
        </li>
        <li><a href="expand-the-sub-menu">Option 2</a>
            <ul id="option2Nav">
                <li><a href="somewhere">Option 2 Link 1</a></li>
                <li><a href="somewhere">Option 2 Link 2</a></li>
                <li><a href="somewhere">Option 2 Link 3</a></li>
                <li><a href="somewhere">Option 2 Link 4</a></li>
                <li><a href="somewhere">Option 2 Link 5</a></li>
            </ul>
        </li>
        <li><a href="somewhere">Option 3</a></li>
        <li><a href="somewhere">Option 4</a></li>
        <li><a href="somewhere">Option 5</a></li>
        <li><a href="somewhere">Option 6</a></li>
    </ul>
</nav>

この形式は変更されませんが、サブメニューのオプションの数は変更される可能性があります (クライアントはこれを自由に変更できます)。これまでの私のjQuery：

$('#mainNav ul').hide();
$('#mainNav li a').click(function(){
    $('#mainNav li:has("ul")').each(
        function(){
            $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){
            //Do magic stuff here - i.e. display the correct sub-menu.
            });
        }
    );
});

現在、これはクリックするとすべてのオプションを対象としていますが (理由はわかりません)、適切なサブメニューのみを表示する方法についてはまだ理解していません。作業を簡単にするのに役立つ場合は、任意の html 要素にクラスを追加できます。

前もって感謝します！

4

1 に答える 1

1

どうですか：

http://jsfiddle.net/qDX2q/3/

$('#mainNav ul').hide();
$('#mainNav a')
    .click(function()
           {
                $('#mainNav ul').hide();
                $(this).siblings("ul").show();
                return false;
           });
​

あなたが欠けていたと思うものは次のとおりです。

  • クリックイベントからfalseを返すようにして、不正なURLがフォローされないようにしてください。
  • thisキーワード。上記のコードthisでは、実際にはあなたが使用しているアンカータグです。だからあなたは兄弟を探して見せることができulます
于 2012-08-15T14:15:14.900 に答える