Question

我的网站上有一个侧边栏，我在点击时隐藏了。

$('#sidebar').toggle('slide', 'left', 300)

我也有一种CSS风格隐藏了这种侧边栏手机。

#sidebar {
    display: none;
}

/* if screen size gets wider than 768 */
@media screen and (min-width:768px) {
    #sidebar {
        display: block;
    }
}

然而，这两个不能很好地协同工作，因为.toggle()使用内联CSS。有没有办法让.toggle()使用内联样式？或者会有更好的解决方案。

谢谢！托马斯

Answer 1

使用类进行操作并切换该类。现在它将协同工作，因为如果侧边栏是打开的，那就无所谓了。

CSS：

#sidebar {
    display: none;
    -webkit-transform: translate(-300px, 0px);
    -ms-transform: translate(-300px, 0px);
    transform: translate(-300px, 0px);
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s;
}
#sidebar.open {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

/* if screen size gets wider than 768 */
@media screen and (min-width:768px) {
    #sidebar {
        display: block;
    }
}

使用动画打开时也是如此。使用transform进行浏览器优化。

jQuery的：

$('#sidebar').toggleClass('open')

没有内联CSS的JQuery切换（向左滑动）

1 个答案: