有没有办法在 jQuery 中区分初始点击和以后的点击？答案

【问题标题】：Is there a way to differentiate in jQuery between an initial click and later clicks?有没有办法在 jQuery 中区分初始点击和以后的点击？
【发布时间】：2013-06-01 20:39:39
【问题描述】：

当我点击它时，我希望我的 div 从 55px 高度增长到 125px 高度，然后当我再次点击它时又回到 55px 高度。这有点超出我的想象，所以现在当我点击它时，它会同时增长和缩小。 >.

这是我的代码：

       $('div').click(function() {
           $(this).animate({
               height: '125px'
           });
       });
       $('div').click(function() {
           $(this).animate({
               height: '55px'
           }); 
       });

【问题讨论】：

标签： jquery click jquery-animate

【解决方案1】：

$('div').click(function() {
    $(this).animate({
        height: $(this).height() < 125 ? 125 : 55
    });
});

包含 JavaScript (jQuery) 以及 更好的 CSS 方法： jsFiddle

【讨论】：

谢谢！ CSS 方式是一种更好的方法！
+1 不错的解决方案，使用 CSS，最好将其添加到您的答案中：)

【解决方案2】：

对于美学特征（如height），无论如何您都应该使用 CSS 来操作它。事实证明，它也让 jQuery 方面的事情变得更容易，因为例如，您可以打开或关闭一个类。

div {
    height : 55px;
}
div.state-enabled {
    height : 125px;
}

// jQuery
$('div').on('click', function () {
     $(this).toggleClass('state-enabled', 'fast');
});

请注意，没有动画功能的.toggleClass() 在 jQuery 中是开箱即用的； .toggleClass() 带有动画来自添加 jQuery UI 库。这为您解决了 height 需要进行动画处理，并自动为您在适当的属性上连接适当的动画调用。

【讨论】：

【解决方案3】：

您可以在该特定元素的单个“单击”事件处理程序中调用 toggleClass 函数。

我用jsFiddle做了一个例子。

HTML

<body>
    <div class="small">
        Toggle me!
    </div>
</body>

CSS

div.small {
    height: 55px;
}

div.big {
    height: 125px;
}

Javascript (jQuery)

$("div").click( function() {
     $(this).toggleClass("big", 1000);   
});

注意：To be able to provide a second argument"duration" 到 "toggleClass()"（一个整数）来动画类之间的过渡，你还需要使用 jQuery UI 库。

【讨论】：

【解决方案4】：

您的活动被绑定了 2 次。

$('div').click 的每个实例一个

这就是行为的原因。只绑定一次事件

var i = 0;
$('div').click(function() {
    i++;
    $(this).animate({
        height: i%2 ===0 ? '125px' : '55px'
    });
});

【讨论】：

【解决方案5】：

更好的方法可能是使用 CSS 类来切换高度并管理过渡：

一些 HTML：

<div class="toggle-div"></div>

一些 CSS：

.toggle-div {
    height: 55px;
    transition: height 1s;
}
.taller { height: 125px; }

现在还有一些用于点击的 javascript：

$('.toggle-div').on('click', function () {
    $(this).toggleClass('taller');
});

JSFiddle 演示了这种方法：http://jsfiddle.net/PzxXZ/

【讨论】：