0

以下のように、基本的なネストされたリストを含むメニューがあります。

<nav>
    <ul id="mainNav">

        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul class="navChild">
                <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 class="navChild">
                <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>

そして、現在のメニューの状態に応じて、必要なアニメーション効果を生成する条件付きスクリプトをいくつか書きました。

$('#mainNav ul').hide();

$('#mainNav>li>a').click(function(){
    var elm = this;

    // If clicked element has a sibling ul with specified class
    if ($(elm).next().hasClass('navChild')){
        // ... & another child ul is already visible
        if ($('.navChild').is(':visible')){
            $('#mainNav ul').fadeOut(300, function() {
                $(elm).siblings('ul').fadeIn(300);
            });
        // ... & no child ul is visible
        } else {
            $('nav').animate({bottom:'60px'},300,function(){
               $(elm).next().fadeIn(300);
            });
        }

    // Else clicked element has no sibling ul with specified class
    } else {
        // ... & another child ul is already visible
        if ($('.navChild').is(':visible')){
            $('#mainNav ul').fadeOut(300, function(){
                $('nav').animate({bottom:'24px'});
            });
        // ... & no child ul is visible
        } else {
            // Follow link as usual
        }
    }
});

コードは見苦しく冗長かもしれませんが、機能します。

私が今やろうとしているのは、現在のメニュー項目を強調表示することです。トップレベルの<a>タグの場合は、そのリンクだけを強調表示する必要があります。ただし、子レベルの<a>タグでは、そのリンクとその親リンクの両方を強調表示する必要があります。もう 1 つの注意点は、親リンクをクリックして表示されたときに、すべての子リンクを非アクティブな状態にしたいということです。

ここに jsFiddle http://jsfiddle.net/pHwgkがあり、ほとんど機能します。子レベルを表示、非表示、および再表示する場合、<ul>私の言いたいことがわかるはずです-つまり、状態を記憶させたくありません以前入っていました。

おそらく不必要に大規模なコーディングを節約するためのエレガントなソリューションを誰かが持っていることを願っています。

4

2 に答える 2

1

これを見てください：http://jsfiddle.net/adamzr/ku6Yj/

追加した：

$('.navChild>li>a').each(function(){
    $(this).addClass('off');
});

メインレベルのリンクがクリックされるたびに呼び出されます。すべての下位リンクを「オフ」状態に設定します。これにより、「メモリ効果」が排除され、サブレベルのリンクがクリックされる前に表示されなくなります。

于 2012-08-28T22:54:45.230 に答える
0

より良い効果と結果を得るために、いくつかの不要なコードを整理します。

http://jsfiddle.net/Madevil/hBVqF/

この場合、操作する必要.each()はありません。.addClass()

于 2012-08-29T00:16:28.587 に答える