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

Question

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

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

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

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

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

Answer 1

你可以这样做:

fiddle : 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');
    }    
});