使用折叠的 Bootstrap 导航栏上的按钮来切换使用 class="hidden-xs" 隐藏的特定 div 的显示

Question

我有一个复杂的搜索表单，我想在移动浏览器上默认隐藏它，而不是在导航栏中显示一个图标来切换它的显示。

默认情况下，包含搜索表单的 div 在使用 class="hidden-xs" 的手机上隐藏

我想做的是拥有$("#search").fadeToggle()，但这并不能解决问题，实际上它似乎什么也没做。

相反，我通过使用$("#search").removeClass('hidden-xs') 部分存在，但这显然不会切换或产生淡入淡出效果。我错过了什么明显的东西吗？搜索表单非常复杂，即使在大屏幕上，我也不希望它显示在导航栏中。

jsfiddle - http://jsfiddle.net/ZNUBx/1/

Answer 1

你可以这样做：

小提琴： http://jsfiddle.net/ZNUBx/2/

JS：

$("#search-button").click( function(){
    $("#search").removeClass('hidden-xs').stop().hide().fadeIn();
});

更新： [asker demand][see comment] with hide event

jsfiddle : http://jsfiddle.net/ZNUBx/3

Js:

$("#search-button").on('click', function(){
    if(  $("#search").hasClass('hidden-xs')   )
    {
        $("#search").removeClass('hidden-xs').hide().fadeToggle();
    } else {
        $("#search").addClass('hidden-xs');
    }    
});