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演示