我正在使用 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 仅在网站在移动设备屏幕中打开时显示。
最佳答案
只是因为您从不为其设置动画。如果你想有幻灯片效果,你可以使用一个例子
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;
}
默认 View 的CSS:
.slide-menu
{
position: fixed;
height: 100%;
width: 180px;
margin: 0 0 0 -180px;
}
一个想法可能是将您的内容移出屏幕的可见区域,只要它是“隐藏”的,如果您“显示”它,您只需将内容的位置更改为可见区域中的某些内容即可。
关于javascript - 显示 block 添加滑动效果不显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28107242/