没有内联 CSS 的 JQuery 切换(向左滑动)

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

然而，这 2 个不能很好地协同工作，因为 .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;
    }
}

还有在使用动画打开某些东西时。使用转换进行浏览器优化。

jQuery:

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