CSS收缩展开代码

html-css07

CSS收缩展开代码,第1张

要用javascript的<div><a href="javascript:vod(0)>"<B id="show_hide">收缩</B></a></div>

<ul id="content">

<li>收缩展开的内容一</li>

<li>收缩展开的内容二</li>

<li>收缩展开的内容三</li>

</ul>

<script>

document.getElementById('show_hide').onclick = function (){

var con = document.getElementById('content').style

if(this.innerHTML == '收缩'){

con.display= 'none'

this.innerHTML = '展开'

return false

} else {

con.display= ''

this.innerHTML = '收缩'

return false

}

}

</script>

像css, html, JavaScript以及其它代码, 都是纯文本文件, 你所看到的折叠, 着色等功能都是编辑器实现的, 不需要特别操作, 只需要使用好的代码编辑器就可以了. visual studio code以及atom都是当今最为流行也最为出色的JavaScript/html/css编辑器. 都是免费的, 体积也都比较小. 百度直接搜索,打开官网下载即可.

橘色部分使用绝对定位，比如侧边栏宽度为200px,橘色部分的绝对定位就写left:200pxright:0

收缩后减少left的值，比如left：20px