jquery - 2列灵活布局

Question

我有 2 列结构。使用的CSS如下:

.div-left
{
position: relative;
float: left;
width: 18%;
margin: 1;
}

.div-right
{
position: relative;
float: right;
width: 81%;
margin: 0;
}

从某种意义上说，我想要一个灵活的结构，当一列折叠时，其他列应该自动占据空间。

我试图隐藏第一列，如下所示:

$("#test").animate({width: 'toggle'});

这隐藏了我的第一列，但右列没有占用第一列释放的空间。

我从这里 (http://www.learningjquery.com/2009/02/slide-elements-in-different-directions) 使用 javascript 进行切换。

如有任何帮助，我们将不胜感激。

Answer 1

另一个解决方案:使用 CSS 转换(我提到它是因为您在标签中列出了 CSS3)和 .expanded/.collapsed 类。然后使用 jQuery 来切换类。

demo (单击一列使其展开/返回初始宽度)

HTML:

<div class='left'></div>
<div class='right'></div>

CSS:

* { margin: 0; }
div { min-height: 10em; transition: linear 1s; }
.left {
  float: left;
  width: 18%;
  background: crimson;
}
.right {
  float: right;
  width: 81%;
  background: dodgerblue;
}
.expanded { width: 100%; }
.collapsed { width: 0%; }

jQuery:

$('div').click(function(){
    $(this).toggleClass('expanded').siblings().toggleClass('collapsed');
});