Question

我正在使用JS功能在较小的屏幕上显示/隐藏DIV，但我正在使用的功能只是打开DIV而不是滑动它。

这是JS代码。

$('.searchBtn').click(function (){
     var nav = $('.SearchParameters');
     if(nav.hasClass('showing')){
         nav.removeClass('showing').addClass('hiding');
     }else{
         nav.removeClass('hiding').addClass('showing');
     }
 });
$(window).resize(function(){
    var winwidth = $(window).innerWidth();
    if(winwidth > 768){
        $('.SearchParameters').removeClass('showing').removeClass('hiding');
    }
});

这是CSS

.SearchParameters.showing {
    display: block;
}
.SearchParameters.hiding {
    display: none;
}

我不想添加高度，因为DIV上有边框，它看起来像一条细线。只有在移动设备屏幕中打开网站时才会显示此DIV。

Answer 1

仅仅因为你从未动画过它。如果您想要幻灯片效果，可以使用示例

if (menuClicked === false) {
        $('.slide-menu').animate(
        {
            margin: '0 0 0 0'
        }, 200);
        menuClicked = true;
    }
    else
    {
        $('.slide-menu').animate(
        {
            margin: '0 0 0 -180px'
        }, 200);
        menuClicked = false;
    }

默认视图的CSS：

.slide-menu 
{
position: fixed;
height: 100%;
width: 180px;
margin: 0 0 0 -180px;
}

一个想法可能是将您的内容移出屏幕的可见区域，因为它是隐藏的＆＃34;如果你＆＃34;显示＆＃34;它只是将内容的位置更改为可见区域中的内容。

在显示块中添加滑动效果并显示无div

1 个答案: