0

最初の質問から 1 日が経ちましたが、戻ってきたと言うのが怖いです。今回は別問題ですが…

以下のように、いくつかのネストされたメニューを含む水平メニューがあります。

<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>

CraftyFellaは昨日、基本的な動作を機能させるのに役立ちましたが、これを拡張して、現在のメニュー状態に基づく条件付き動作を含めたいと思います。

これまでの (コメントされた) ロジックとコードは次のとおりです。

$('#mainNav ul').hide();
$('#mainNav>li>a').click(function(){
    var elem = this;
    // If clicked element has a sibling ul with specified class
    if($(elem).next().hasClass("navChild")){

        // & If another child ul is already visible
        if ($('.navChild').is(':visible')){

            // Fade out any others, and fade this one in
            $(this).fadeOut(300, 'easeOutQuint', function(){
                $(elem).next("ul").fadeIn(300,'easeOutQuint');
            });
            return false;

        // Else if no child ul is visible
        }else{

            // Raise main links and fade in current child ul
            $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){
                $(elem).next().fadeIn(300,'easeOutQuint');
            });
        }

    // Else clicked element has no sibling ul with specified class
    }else{
        // If others are visible, fade them out and lower the main links
        $('#mainNav ul').fadeOut(300, 'easeOutQuint',function(){
            $('nav').animate({bottom:'24px'},300,'easeOutQuint');
        });
    }
});

簡単に言うと、すべてのサブメニューを非表示にする必要があります。クリックされた兄弟として存在する場合は表示/交換し、そうでない場合はすべて非表示にする必要があります。

悲しいことに、それはまったく機能しません。「交換」部分を除いてほとんど機能します-サブメニューがすでに表示されていて、別のサブメニューが表示されるようにトリガーされた場合、両方が表示され、クリックされた要素が消えます(!)。

それもおそらくひどいコードです-私はまだこれに非常に慣れていません-しかし、誰かがロジック部分を手伝うことができれば、後でクリーンアップすることができます.

編集 - http://jsfiddle.net/hKYJz/1/ - 奇妙なことにまったく機能しません>:(

4

3 に答える 3

1

これを使って実装してみる

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
       $('#mainNav ul').fadeOut(300);
    $(this).find('ul').fadeIn(300);
});​
于 2012-08-16T13:02:58.177 に答える
1

これを試してください：

$('#mainNav ul').hide();
$('#mainNav>li').click(function(event){
    event.preventDefault();
    var elm = this;
    $('nav').animate({
                bottom:'60px',
                duration:300,
                easing:'easeOutQuint'
            },function(){  
                    $(elm).find('ul').fadeIn(300);
            });
    $('#mainNav ul').fadeOut(300);
});

これは JSFiddle です: http://jsfiddle.net/hKYJz/35/

于 2012-08-16T13:52:08.783 に答える
0

最終的にそれを機能させることができました。貢献してくれた人たちに感謝します - あなたの助けがなければ、私はほぼ間違いなく今でも立ち往生していたでしょう.

http://jsfiddle.net/hKYJz/47/

于 2012-08-16T20:30:54.847 に答える