javascript怎么实现列表显示与折叠

JavaScript019

javascript怎么实现列表显示与折叠,第1张

一、首先定义一个JavaScript function，如下：

function puckerMenu(level) {

var levelLength = ('row' + level).length

var toDo = '0'

for (var iCount = 0 iCount <document.all.lengthiCount++){

if ( document.all[iCount].id.indexOf('row' + level) >-1 &&( document.all[iCount].id.length >levelLength)) {

if ( document.all('level' + level).src.indexOf('minus.gif') >-1 ) {

document.all[iCount].style.display = 'none'

toDo = '1'

} else {

document.all[iCount].style.display = 'block'

toDo = '0'

}

}

}

if ( toDo == '1' ) {

document.all('level' + level).src = 'images/plus.gif'

} else {

document.all('level' + level).src = 'images/minus.gif'

}

}

二、然后在网页上定义一个div和一个ul，注意div中要包含一个id为level开头的image和一个onclick事件，ul中id要包含row，默认情况下是展开的，如果需要默认为闭合，则要在ul中加入style="display:none"

例子如下：

<body>

<divstyle="CURSOR: hand"

onclick="puckerMenu('1')"><IMGid=level1

src="images/minus.gif">public class DataAccess</div>

<ulid=row1>

<li>private string connString

<divstyle="CURSOR: hand"

onclick="puckerMenu('2')"><IMGid=level2

src="images /plus.gif">protected DbConnection OpenConnection()</div>

<ulid=row2style="display:none">{...}</ul>

<li>

Other

</ul>

</body>

可以改变 "div" 元素的高度(jQuery的animate方法)：

$(".btn1").click(function(){

  $("#box").animate({height:"300px"})

})

也可以设置溢出隐藏：

<div style="min-height:10pxoverflow:hidden">

    <div style="margin-top:-800px">content more..</div>

</div>

第二种方式也需要js动态改变div style里面的margin-top。