javascript - jQuery 关闭相同元素的点击

Question

我有一个按钮，当你点击它时，新元素就会“掉落”进去。所以我想做的是，当你再次按下它时，它会返回。本质上是淡出的。这是我到目前为止所拥有的\

$(".icon-search").click(function(){
    $(".search").css('height', '100px')
});

当您单击该图标时，黑色形状将变为 100px。我想做的是通过再次点击它来摆脱它。我在网上看到过其他东西，但似乎都不起作用。

这是一个演示 http://jsfiddle.net/PHX3A/

Answer 1

JSFiddle

.toggleClass() 将为您解决问题。

.toggleClass():

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

JavaScript:

$(".icon-search").click(function(){
    $(".search").toggleClass("doHeight");
});

CSS:

.doHeight{
 height:100px;   
}

有关使用 .toggleClass() 的更多信息，请点击 here

第二个选项:

JSFiddle

使用.toggle()引用:toggle

JS:

$( "div" ).click(function() {
  $( ".search" ).toggle( "slow" );
});