演示：http://www.purewhite.cn/demo/20060708001/ 代码： HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>菜单</title> <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; background: #eee; } div { text-align: right; background: #eff5ff; padding: 3px 8px 2px; margin-bottom: 12px; border: 1px solid #79a7e2; } div a { color: #00368f; text-decoration: none; } ul { padding: 0; margin: 0; list-style: none; } body ul li { background: #fff; border: 1px solid #79a7e2; margin-bottom: 12px; } body ul li h2 { color: #00368f; font-size: 12px; font-weight: bold; background: #eff5ff; padding: 3px 8px 2px; margin: 0; } body ul li ul { display: block; } body ul li ul li { border: 0; padding: 2px 8px; margin: 0; } .collapse { display: none; } .expand { display: block; } --> </style> <script language="javascript"> var oTitles; function init() { oTitles = document.getElementsByTagName("h2"); for (var i = 0; i < oTitles.length; i++) { oTitles[i].onclick = function() { if (this.nextSibling.nodeType == 1) { this.nextSibling.className = (this.nextSibling.className == "collapse") ? "expand" : "collapse"; } else if(this.nextSibling.nodeType == 3) { this.nextSibling.nextSibling.className = (this.nextSibling.nextSibling.className == "collapse") ? "expand" : "collapse"; } else { return false; } } } } function expandAll() { for (var i = 0; i < oTitles.length; i++) { if (oTitles[i].nextSibling.nodeType == 1) { oTitles[i].nextSibling.className = "expand"; } else if(oTitles[i].nextSibling.nodeType == 3) { oTitles[i].nextSibling.nextSibling.className = "expand"; } else { return false; } } } function collapseAll() { for (var i = 0; i < oTitles.length; i++) { if (oTitles[i].nextSibling.nodeType == 1) { oTitles[i].nextSibling.className = "collapse"; } else if(oTitles[i].nextSibling.nodeType == 3) { oTitles[i].nextSibling.nextSibling.className = "collapse"; } else { return false; } } } window.onload = init; </script> </head> <body> <div><a href="javascript: expandAll();">全部展开</a> | <a href="javascript: collapseAll();">全部收缩</a></div> <ul> <li> <h2>Title 01</h2> <ul> <li>Menu 01</li> <li>Menu 02</li> </ul> </li> <li> <h2>Title 02</h2> <ul> <li>Menu 03</li> <li>Menu 04</li> </ul> </li> </ul> </body> </html> 用了一点点 DOM 的知识，兼容 FF 1.5 和 IE 6。 对于 FF 和 IE 下(空白)文本节点的处理的不同，总是比较碍手碍脚。