Question

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

默认情况下，使用class="hidden-xs"

在移动设备上隐藏包含搜索表单的div

我想要做的是$("#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');
    }    
});

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

1 个答案: