0

在我正在设计的一个新网站上，我有一个顶部 div，里面有一个链接。单击该链接时，div 动画到内容的完整高度。这可行，但我想再次单击该链接以将 div 动画恢复到以前的状态。这是行不通的。

我使用的是 jQuery 1.5.2，因此使用 .delegate() 而不是 .on()。请不要建议升级我的 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
        });

如何让第二个 .delegate() 事件触发？

请在http://jsfiddle.net/4KL2z/1/上尽情测试

4

4 回答 4

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

尝试存储扩展 div 的状态以减少代码：

var expanded = false,
    $topBar = $('#topbar');

$topBar.delegate('#basket_trigger', 'click', function() {
    var height;

    if (expanded) {
        height = topbarContractedHeight;
        $topBar.removeClass('topbarexpanded').addClass('topbarcontracted');
    } else {
        height = topbarExpandedHeight;
        $topBar.removeClass('topbarcontracted').addClass('topbarexpanded');
    }

    expanded = !expanded;

    $topBar.animate({
        height: height
    }, 500);

    return false;
});

这是一个有效的演示。

于 2012-08-20T16:10:06.980 回答
1

你可以使用toggleClass，如果你已经找到了#topbar保存它，你没有理由需要一遍又一遍地查找它：

$(document).ready(function(){
    var topbar= $('#topbar');
    var topbarContractedHeight = topbar.height(); // get current height
    var topbarExpandedHeight = topbar.css('height','auto').height();

    topbar.height(topbarContractedHeight);

    topbar.delegate('#basket_trigger', 'click', function(){
        var isContracted = topbar.hasClass('topbarcontracted');
        topbar.animate({
            height: (isContracted ? topbarExpandedHeight : topbarContractedHeight)
        }, 500).toggleClass('topbarexpanded',isContracted).toggleClass('topbarcontracted',!isContracted);
        return false;
    });

});

演示：http: //jsfiddle.net/4KL2z/6/

于 2012-08-20T16:12:53.227 回答
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 回答