jQuery addClass函數似乎運行，但實際上並沒有填充類名

Question

我在這裏遇到一個奇怪的問題。

我開發了一個帶有幾個動作的搜索框。重要的是，當用戶點擊按鈕時它會（或應該......）打開。

HTML：

<form method="get" id="searchform" action=""> 
    <input type="search" placeholder="Search" size="18" value="" name="s" id="s" /> 
    <input type="submit" value=""></input> 
</form> 

CSS：

#searchform { 
    position: relative; 
    min-width: 40px; 
    height: 80px; 
    float: right; 
} 
#searchform input[type="search"] { 
    margin-right: 40px; 
    height:80px; 
    width:2px; 
    background:rgba(245, 245, 240, 1); 
    padding: 0; 

    -webkit-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    transition:all .2s ease-in-out; 
} 
#searchform input[type="submit"] { 
    background: rgba(255, 255, 255, 1); 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 40px; 
    height: 80px; 
} 
#searchform.open input[type="search"] { 
    width: 180px; 
    padding: 0 0 0 20px; 
} 
#searchform.open input[type="submit"] { 
    background:rgba(200, 160, 0, 1); 
} 

JS：

$('#searchform input[type="submit"]').click(function() { 
    $("#searchform").toggleClass('open'); 
}); 

$('#searchform input[type="submit"]').click(function() { 
    if ($('#searchform').hasClass('open') && $.trim($('#searchform input[type="search"]').val()).length === 0) { 
     event.preventDefault(); 
     $('#searchform').removeClass('open'); 
    } 
}); 

$(document).bind('click', function() { 
    $('#searchform').removeClass('open'); 
}); 

$('#searchform').bind('click', function (event) { 
    event.stopPropagation(); 
}); 

而且這裏有一個小提琴：http://jsfiddle.net/5zB8f/1/

---

開放行動非常簡單。一個jQuery腳本添加class="open"到#searchform，但它只是添加類...代碼似乎是有效的，所以我不知道爲什麼它會像這樣的行爲。

如果您手動將該類添加到html並運行它，您將看到它應該過渡到的內容。

任何幫助表示讚賞。獎勵積分，如果有人能告訴我如何優化的jQuery腳本...我敢肯定，我已經寫了超過必要這個工作......

---

編輯：我在那裏得到了toggleClass現在，但它表現相同addClass ...

Answer 1

這是你所需要的？

http://jsfiddle.net/5zB8f/3/

$('#searchform input[type="submit"]').click(function() { 
    $("#searchform").toggleClass('open'); 
    if ($('#searchform').hasClass('open') && $.trim($('#searchform input[type="search"]').val()).length === 0) { 
     event.preventDefault(); 
    } 
    if ($("#searchform").hasClass("open")) return false; 
}); 


$(document).bind('click', function() { 
    $('#searchform').removeClass('open'); 
}); 

$('#searchform').bind('click', function (event) { 
    event.stopPropagation(); 
});