2

私はこれを機能させるのに苦労しています。メニューを表示する一連のクリック可能なボタンを作成しています。私はそれを次のように機能させることを目指しています：

  1. ドロップダウンメニューがすべて非表示になっている場合-高さをアニメートする
  2. ドロップダウンメニューが表示されている場合-表示/非表示でメニューを切り替えます

新しいドロップダウンメニューのアニメーションが両方のシナリオで同じである場合、これをうまく行うことができます。しかし、それは私が望む外観ではありません。すでに開いているときの表示/非表示の「トグル」と、初めて開いたとき（および一度閉じたとき）の高さのアニメーションが本当に欲しいです。さらに一歩進んで、最初の開閉にはドラッグダウン/アップを有効にし、一度開いたらドロップダウンメニュー間を移動するには左/右にスワイプする可能性があるため、シナリオごとに個別のアニメーションが必要になるもう1つの理由です。

最初にイベントでそれを試してみました。つまり、click（）ボタンとif（）all：hidden、次にこれを実行します... click（）ボタンとif（）：visible、次にその他を実行します。しかし、それは機能しませんでした。メニューが開いてすぐに閉じました（ifステートメントが同時に認識されたために両方の.click（）イベントが連続して発生していたためだと思いますか？わかりません）。

次の試みは、以下のとおりですが、各.click（）を独自のifステートメントでラップして、それぞれを個別に定義しようとしました。しかし、次のフィドルからわかるように：

http://jsfiddle.net/U3jHf/31/

動作しません...

これがjQueryです：

//sideUI drop down

if( $('#sideUIContainer').is(':hidden') && $('#sideUISearchContainer').is(':hidden') && $('#sideUIActionContainer').is(':hidden') ){

    $('#navNavigate').click(function(){

            $('#sideUIContainer').show();       
            $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'504px'});          
            $('#navNavigate').addClass('active');

    }

    $('#navSearch').click(function(){

            $('#sideUISearchContainer').show();     
            $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'504px'});          
            $('#navSearch').addClass('active');

    }

    $('#navAction').click(function(){

            $('#sideUIActionContainer').show();     
            $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'504px'});          
            $('#navAction').addClass('active');

    }

};

// toggle drop down when UI open - menu

if($('#sideUIContainer').is(':visible')){

    $('#navNavigate').click(function(){

        $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'0'}, function(){

            $('#sideUIContainer').hide();
            $('#navNavigate').removeClass('active');

        }); 
    }

    $('#navSearch').click(function(){

        $('#sideUIContainer').hide();
        $('#navNavigate').removeClass('active');

        $('#sideUISearchContainer').show();
        $('#navSearch').addClass('active');

    }); 


    $('#navAction').click(function(){

        $('#sideUIContainer').hide();
        $('#navNavigate').removeClass('active');

        $('#sideUIActionContainer').show();
        $('#navAction').addClass('active');

    }); 

};

// toggle drop down when UI open - search

if($('#sideUISearchContainer').is(':visible')){

    $('#navNavigate').click(function(){

        $('#sideUISearchContainer').hide();
        $('#navSearch').removeClass('active');

        $('#sideUINavigateContainer').show();
        $('#navNavigate').addClass('active');

    }); 

    $('#navSearch').click(function(){

        $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'0'}, function(){

            $('#sideUISearchContainer').hide();
            $('#navSearch').removeClass('active');

        }); 
    }

    $('#navAction').click(function(){

        $('#sideUISearchContainer').hide();
        $('#navSearch').removeClass('active');

        $('#sideUIActionContainer').show();
        $('#navAction').addClass('active');

    }); 

};

// toggle drop down when UI open - action

if($('#sideUIActionContainer').is(':visible')){

    $('#navNavigate').click(function(){

        $('#sideUIActionContainer').hide();
        $('#navAction').removeClass('active');

        $('#sideUINavigateContainer').show();
        $('#navNavigate').addClass('active');

    }); 

    $('#navSearch').click(function(){

        $('#sideUIActionContainer').hide();
        $('#navSearch').removeClass('active');

        $('#sideUISearchContainer').show();
        $('#navSearch').addClass('active');

    }); 

    $('#navAction').click(function(){

        $('#sideUIContainer, #sideUISearchContainer, #sideUIActionContainer').animate({'height':'0'}, function(){

            $('#sideUIActionContainer').hide();
            $('#navAction').removeClass('active');

        }); 
    }

};

上記を明確にする必要がある場合はお知らせください。しかし、うまくいけば、私のフィドルとjQueryコードが、私がやろうとしていることを皆さんがさらに理解するのに役立つことを願っています。

ありとあらゆる助けを大いに感謝します。ありがとう！

4

1 に答える 1

2

私はあなたが提案したようなことはしません。これらの個別のイベントハンドラーをすべて維持するのは面倒です。代わりに、navとjQueryのdataメソッドでデータ属性を使用して取得します。これにより、個別のハンドラーを使用せずに、プログラムで正しいサイドバーを選択できます。

ハンドラーで、アクティブなナビゲーションアイテムに「アクティブ」クラスを追加します。次に、このクラスをチェックして、ユーザーが遭遇した3つの可能性のどれかを判別します。

  1. 現在開いているメニューはありません。でアニメーション化します。
  2. メニューは現在開いています。現在のメニューを非表示にします。新しいメニューを表示します。
  3. 同じメニューをもう一度クリックしました。アニメートします。

使用する機能要素が含まれておらず、質問のjs以外の部分に時間を無駄にしたくなかったため、html/cssテンプレートをダンプしました。コードはまだ少しクリーンアップすることができます。私は怠惰になりfoo、そこに残しました。しかし、それから実用的で堅牢なソリューションを引き出すには十分すぎるはずです。

http://jsfiddle.net/wSFED/4/

$('.nav').click( function() {
    debugger;
    var $this = $(this);

    //current menu has been clicked again
    if ($this.hasClass('active')) {
        //however you want to handle this. I collapsed it again
        var $foo = $('#' + $this.data('menu'));
        $foo.animate( {width:0}, 500);        
        $this.removeClass('active');
        return;
    }

    //another menu is already active
    var $active = $('.nav.active');
    if ($active.length) {
        //toggle current clicked item 
        var thismenu = $this.data('menu');
        var activemenu = $active.data('menu');
        var $thismenu = $('#' + thismenu);
        var $activemenu = $('#' + activemenu);

        //hide the old active menu and remove active class from nav
        $activemenu.css( {width:0} );
        $active.removeClass('active');

        //show the new menu and add active class to nav
        $thismenu.css( {width:300} );
        $this.addClass('active');
        return;
    }

    //no menu is active - animate menu in
    var $menu = $('#' + $this.data('menu'));
    $menu.animate( {width:300}, 500);
    $this.addClass('active');


});
于 2013-01-26T05:58:21.220 に答える