1

我一直在玩这个有点，不能完全弄清楚所以......

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

初始状态如下所示。

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

另一种状态是：

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

我希望另一个在它的右边，填充屏幕上的剩余空间。这也应该是动态的，所以当#sidebar 被切换时，它会一直调整大小以填充空间。

注意：#sidebar 的 css 更改也使用 $.animate 进行动画处理，因此它应该在侧边栏重新调整大小时重新调整大小。

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

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

4

2 回答 2

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

小提琴：http: //jsfiddle.net/w9aWp/

于 2013-02-24T16:43:29.387 回答
1

我根据我从事的类似项目整理了这个小提琴：http: //jsfiddle.net/DrdHJ/

基本上我只有两列：

<div id="sidebar">

    <a class="resize" data-width="300">Large</a>
    <br>
    <a class="resize" data-width="200">Small</a>

</div>

<div id="main"></div>

#sidebar是您的“滑动”列，#main是包含内容的主要块。

然后对于 CSS，我有以下内容：

html, body { width: 100%; height: 100%; }

#sidebar { 
    width: 200px;
    height: 100%;
    float: left;
    background-color: red;
}

#main {
    width: auto;
    height: 100%;
    margin-left: 200px;
    background-color: blue;
}

需要注意的重要一点是，margin-lefton#main是保持不变的。

然后对于 JavaScript，我有以下内容：

$('.resize').on('click',function(){

    var width = $(this).data('width');

    $('#sidebar').css('width',width+'px');
    $('#main').css('margin-left',width+'px');

});

它监听事件以调整大小，然后根据单击的链接的属性调整 的宽度#sidebar和左边距的偏移量。这显然可以调整以替换with 。#maindata-widthcss()animate

于 2013-02-24T16:45:18.527 回答