Question

我正在创建一个以主区域和侧栏开头的页面，例如：

------------------------------
|           |                |
| side area |    main area   |
| 20% width |    80% width   |
|           |                |
------------------------------

可以隐藏或显示侧栏，以显示包含或不包含列的页面。

但是...

当移动侧栏时，我需要页面的其余部分然后调整大小以填充。

------------------------------
|                            |
|        main area           |
|        100% width          |
|                            |
------------------------------

侧栏可以切换显示/隐藏，主区域总是调整大小以适应。

现在，我知道网上有很多这样的例子，但似乎没有一个符合条件，并且在我需要的时候让它正常工作。

所有示例似乎都有两个主要方面：

1）他们使用我不想做的JQueryUI。我已经在页面上加载了JQuery，并且如果可能的话，更愿意坚持使用JQuery而不加载其他插件

2）他们滑入/滑出侧栏而不影响页面的其余部分 - 滑出式div似乎总是滑入/滑出页面其余部分的顶部，或者将页面的其余部分推出的方式

我看到的大多数其他示例都使用了一个绝对定位的侧栏，它只是滑入或滑出固定页面的其余部分。

我想也许最好的方法是在按钮点击上运行两个动画 - 一个用于将侧栏宽度设置为20％到0％，另一个用于设置主列宽度为80％的动画到100％，但这看起来有点乱。

Answer 1

你正在寻找这样的东西吗？ http://jsfiddle.net/j3ptnff2/

$('body').on('click', function () {
    $('.side').animate({
        'width': '0'
    }, 1000, function () {
        $('.main').animate({
            'width': '100%'
        });
    });
});

Answer 2

通过使用CSS table-cells我得到了最好的效果。

以这种方式执行页面，我设法制作了两列页面布局，然后将左列的宽度设置为0，这样可以使右侧列的宽度自动扩展为全宽。 / p>

这在实践和跨浏览器中非常有效。

Jquery滑出侧面板，但随后调整页面的其余部分以填充

2 个答案: