html元素一行显示不完收缩_JS+CSS实现DIV层的展开、收缩效果

本文为大家分享的第一个实例：JS控制DIV层的展开、收缩效果。

CSS+JS实现一个DIV层的展开/折叠效果

* { margin:0; padding:0;}

body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}

h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555; padding:3px; display:block; color:#99CC00}

.class1 { width:40%; background:#CCCCCC; position:relative; margin:0 auto; padding:5px;}

span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}

p { text-align:left; line-height:20px; background:#555; padding:3px; margin-top:5px; color:#99CC00}

#class1content { height:256px;overflow:hidden}

function $(element){

return element = document.getElementById(element);

}

function $D(){

var d=$('class1content');

var h=d.offsetHeight;

var maxh=300;

function dmove(){