使用折叠的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();
});

更新: [提问者要求] [见评论]与隐藏事件

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