jQuery关闭具有相同元素的单击

Question

我有一个按钮，当我单击它时，我所拥有的就是新元素“插入”。因此，我想做的就是再次按下它时返回。 由于基本上淡出。 这就是我到目前为止的

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

单击该图标时，黑色形状变为100px 。 我想做的就是通过再次单击来摆脱它。 我在网上看到了其他东西，但似乎都没有用。

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

Answer 1

JSFiddle

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

.toggleClass() ：

从匹配元素集中的每个元素中添加或删除一个或多个类，具体取决于该类的存在或switch参数的值。

JavaScript ：

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

CSS ：

.doHeight{
 height:100px;   
}

有关使用.toggleClass()更多信息，请单击此处

第二种选择 ：

JSFiddle

使用.toggle()参考： 切换

JS：

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

Answer 2

使用toggleClass函数设置CSS 。 在此示例中，我向toggle类添加了CSS

尝试这个：

jQuery的：

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

CSS：

.toggle{
    height:100px;
}

JSFiddle演示