jquery - 使用相对位置 div 调整大小

Question

我一直在研究这个，但不太明白，所以...

我有一个本质上是滑动侧边栏的东西。

初始状态如下所示。

#sidebar {
    position: fixed,
    width: 200px
}

另一种状态是:

#sidebar {
    position: fixed,
    width: 200px,
    left: -190px
}

我想要另一个在这个右边填充屏幕上的剩余空间。这也应该是动态的，因此当切换#sidebar 时，它会重新调整大小以始终填充空间。

注意:#sidebar 的 css 更改也使用 $.animate 进行动画处理，因此它应该随着侧边栏的大小调整而调整大小。

有没有用 CSS 做这个的好方法。或者，是否有用于滑入/滑出侧边栏的良好 jscript/jquery 库。我找了找，但没找到，所以我开始自己动手。

我能想到的唯一其他方法是使用 jscript 手动调整另一个的大小，同时重新定位 #sidebar。但这似乎结束了。

Answer 1

这是一个例子:

CSS:

#sidebar
{
    position: fixed;
    width: 200px;
    background-color:#9cf;
    left:0;
}
#sidebar.tucked { left: -190px; }
#content
{
    margin-left:200px;
}
#content.tucked { margin-left:10px; }

Javascript:

$(function()
{
    $('#sidebar').on("click", function()
    {
        $('#sidebar, #content').toggleClass("tucked", 1000);
    });
});

fiddle :http://jsfiddle.net/w9aWp/