所以,我正在尝试创建一个 JavaScript 或查询来隐藏右侧边栏 div。事实证明比我预期的要困难得多,但我已经很接近了。
我创建了一个隐藏/显示右侧边栏,单击时滑出,然后再次单击按钮时滑回到全宽。
问题: 当点击“隐藏”时: 侧边栏滑出为“width:10px;”内容为 margin-right:10px; 当点击“显示”时: 侧边栏滑入“宽度:200px;”并将内容滑回 'margin-right:200px;
我创建了一个 JS Fiddle 来展示:
我正在尝试完成一个动画版的面子书右侧边栏。 这还有另一个例子:http://www.sidlee.com/
谢谢。
以下是较旧但仍在运行的 Javascript 和 JQuery 切换。
切换器隐藏侧边栏。
$('#toggle').toggle(function() {
$('#right-sidebar').animate({
width: "10px",
backgroundColor: "#000000"
}, 400);
}, function() {
$('#right-sidebar').animate({
width: "200px",
backgroundColor: "#ffffff"
}, 400);
});
在此处查看工作版本: