HTML中列表收起与展开

html-css013

HTML中列表收起与展开,第1张

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

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

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

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

或

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

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

为简化用户操作，希望鼠标悬停在下拉列表框上时，能自动展开。查了一下select的属性，没有相关的操作。最后找了一个变通的办法，代码如下：

<select onmouseover="size=10" onmouseout="size=1" onchange="size=1">

<option value="126.htm">126</option>

<option value="163.htm">163</option>

<option value="16.NET.htm">163net</option>

<option value="163vip.htm">163vip</option>

就是让鼠标悬停后，显示的数目就自动改成10或其它数目。鼠标移开后，还原成只显示一个。用户点击了某一项也让它恢复成正常状态。