HTML中列表收起与展开_随笔

最常见的方法是通过Javascript控制某标签的CSS属性来实现的，下面是具体实现方法：

首先给要隐藏或显示的部分所在标签一个惟一的ID，比如将它们放到一个<div id="div1"></div>里

然后给某个实体(按你的意思来，就是"列表元素")的onclick事件写一个响应的方法，方法中用上类似以下的语句：

document.all["div1"].style.display="block"//显示

或

document.all["div1"].style.display="none"//隐藏

其中"div1"就是要显示或隐藏的部分的ID。

<!DOCTYPE HTML>

<html>

<body>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

</body>

</html>

这样就是一个展开收缩的效果了

<body>

<ul>

</ul>

</div>

var oDiv = document.getElementById('div1')

var oUl = oDiv.getElementsByTagName('ul')[0]

var Off = true

oDiv.onclick = function(){

if(Off){

oUl.style.display = "block"

Off = false

}else{

oUl.style.display = "none"

Off = true

}

</script>

欢迎分享，转载请注明来源：内存溢出

HTML中列表收起与展开