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

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

Answer 2

我根据我所做的类似项目将这个小提琴放在一起：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-left上的#main是保持原样的。

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

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

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

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

});

其中侦听要调整大小的事件，然后根据所点击链接的#sidebar属性调整#main的宽度和data-width的左边距偏移量。显然可以调整这一点，将css()替换为animate。

使用相对位置div重新调整大小

2 个答案: