Question

在我正在设计的新网站上，我有一个带有链接的顶级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/

测试您心中的内容

Answer 1

真的很简单，不是使用第二个委托，而是使用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/

Answer 2

尝试存储扩展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;
});

这是一个有效的DEMO。

Answer 3

你可以使用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/

Answer 4

晚会，但这是一个彻底清理的代码版本。你应该利用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;
    });

});

jQuery .delegate（）。事件未在第二次点击时触发

4 个答案: