变长div

来源：互联网发布：柬埔寨旅游城市知乎编辑：程序博客网时间：2024/05/01 19:26

   在前端页面布局中，我们经常需要隐藏/显示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);})

0 0