我有 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'});
这隐藏了我的第一列,但右列没有占用第一列释放的空间。
我用javascript从这里切换(http://www.learningjquery.com/2009/02/slide-elements-in- Different-directions)。
对此的任何帮助将不胜感激。
另一个解决方案:使用 CSS 过渡(我提到它是因为你在标签中列出了 CSS3)和.expanded
/ .collapsed
类。然后使用 jQuery 来切换类。
demo http://codepen.io/thebabydino/pen/ixbyd(单击一列使其展开/返回到初始宽度)
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');
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)