0

私がデザインしている新しいサイトには、リンクを含むトップ div があります。そのリンクをクリックすると、div がコンテンツの高さ全体にアニメーション化されます。これは機能しますが、そのリンクをもう一度クリックして、divをアニメーション化して以前の状態に戻したいと思います。これは機能していません。

私はjQuery 1.5.2を使用しているため、.on()ではなく.delegate()を使用しています。jQuery のバージョンをアップグレードしないでください。

jQuery

// top bar & basket functionality
        var topbarContractedHeight = $('#topbar').height(); // get current height
        $('#topbar').css('height','auto'); // temp. set height to auto...
        var topbarExpandedHeight = $('#topbar').height(); // ...and store it
        $('#topbar').css('height',topbarContractedHeight); // put the height back to how it was

        $('.topbarcontracted').delegate('#basket_trigger', 'click', function(){
            $('#topbar').animate({ height: topbarExpandedHeight }, 500).removeClass('topbarcontracted').addClass('topbarexpanded'); // ...animate the height to the expanded height stored earlier, remove the 'contracted' class and add 'expanded'...
            return false; // ...and don't process the link
        });

        $('.topbarexpanded').delegate('#basket_trigger', 'click', function(){
            $('#topbar').animate({ height: topbarContractedHeight }, 500).removeClass('topbarexpanded').addClass('topbarcontracted'); // ...animate the height to the expanded height stored earlier, remove the 'expanded' class and add 'contracted'...
            return false; // ...and don't process the link
        });

その 2 番目の .delegate() イベントを発生させるにはどうすればよいですか?

http://jsfiddle.net/4KL2z/1/で心ゆくまでテストしてください。

4

4 に答える 4

2

2番目のデリゲートを使用する代わりに、次のif()ようなステートメントを使用するのは非常に簡単です。

 $('.topbarcontracted').delegate('#basket_trigger', 'click', function(){
   if ($('#topbar').hasClass('topbarcontracted')) {
     $('#topbar').animate({ height: topbarExpandedHeight }, 500).removeClass('topbarcontracted').addClass('topbarexpanded'); // ...animate the height to the expanded height stored earlier, remove the 'contracted' class and add 'expanded'...
   } else {
     $('#topbar').animate({ height: topbarContractedHeight }, 500).removeClass('topbarexpanded').addClass('topbarcontracted'); // ...animate the height to the expanded height stored earlier, remove the 'expanded' class and add 'contracted'...
   }
   return false; // ...and don't process the link
 });

およびJSfiddleリンク：http ：//jsfiddle.net/4KL2z/2/

于 2012-08-20T16:05:27.280 に答える
1

パーティーに遅れましたが、ここにコードの大幅にクリーンアップされたバージョンがあります。を利用する必要がありtoggleClassます; ここではステートメントは必要ありません。 if

$(document).ready(function (){
    // top bar & basket functionality
    var topbarContractedHeight = $('#topbar').height(); // get current height
    $('#topbar').css('height','auto'); // temp. set height to auto...
    var topbarExpandedHeight = $('#topbar').height(); // ...and store it
    $('#topbar').css('height',topbarContractedHeight); // put the height back to how it was

    $('#topbar').click(function () {
        $(this).animate({
            height: ($(this).hasClass('expanded') ? topbarContractedHeight : topbarExpandedHeight)
        }).toggleClass('expanded');
        return false;
    });

});

</ p>

于 2012-08-20T16:14:53.493 に答える