在前端页面布局中,我们经常需要隐藏/显示div,一种常用的方式是使用position: fixed属性,但是这种属性是针对整个页面定位,对流动数据的展示比较有效,还有一种是使用position: relative属性,实现可伸缩div。 刚开始时,页面布局为
点击向右箭头后,页面布局为:
实现方式(向右箭头的class=list, 实际是使用bootstrap中图标库中的图标):
html文件:
<div class="data">
<div class="list-zhankai">
</div>
<span class="glyphicon glyphicon-list list"></span>
<div class="data-show">
</div>
</div>
css文件:
.data{
width: 1010px;
height: 640px;
overflow: hidden;
position: absolute;
}
.list-zhankai{
width: 100px;
float: left;
}
.list{
margin-top: 10px;
margin-left: 20px;
width: 10px;
height: 10px;
float: left;
position: relative;
}
.data-show{
height: 640px;
position: relative;
left: 10px;
background-color: #2a6496;
right: 0px;
overflow: hidden;
}
JavaScript文件(使用jquery):
$(".list").on("click", function(){
$(".list-zhankai").toggle(600);
})