javascript下拉列表中显示树形菜单的实现方法

很简单的一个使用：点击菜单，能够显示下面的或者不显示。
1、主要目的：展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容
用到的是 overflow：hidden 和 overflow="visible"这两个属性在点击的function中，设置属性应该
node.style.overflow="visible";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽
2、采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

实现效果：

<！DOCTYPE html> <html><head><title>list.html</title> <！--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css"> dl{ height:18px;/*优先级问题，必须要写*/ overflow:hidden; } dd{ margin:0px; padding:0px; } .close{ height:18px;/*优先级问题，必须要写*/ overflow:hidden; } .open{ height:80px; overflow:visible; background-color:#ff8000; }</style><script type="text/javascript"> function click2（node1）{ // alert（"aa"+node.nodeName）;// tdvar nodes=node1.parentNode; // alert（nodes.nodeName）;// alert（"aa"+nodes.className）;//※※通过传进的对象 判断采用哪种css模式if（nodes.className=="open"）{ nodes.className="close";}else{ nodes.className="open";}}</script></head><body><！--层次列表--><！--当很多时候采用传参就很麻烦,每个都需要去传参<dl><dt onclick="click1（0）">菜单条1</dt><dd>菜单1</dd><dd>菜单2</dd><dd>菜单3</dd><dd>菜单4</dd></dl><dl><dt onclick="click1（1）">菜单条2</dt><dd>菜单11</dd><dd>菜单22</dd><dd>菜单33</dd><dd>菜单44</dd></dl><dl><dt onclick="click1（2）">菜单条3</dt><dd>菜单12</dd><dd>菜单23</dd><dd>菜单34</dd><dd>菜单45</dd></dl>--> <br/><br/><hr/><！--<dl class="close">先手动采用css测试，可以然后采用编程使用--><dl><dt onclick="click2（this）">1菜单条1</dt><dd>菜单1</dd><dd>菜单2</dd><dd>菜单3</dd><dd>菜单4</dd></dl><dl><dt onclick="click2（this）">2菜单条2</dt><dd>菜单11</dd><dd>菜单22</dd><dd>菜单33</dd><dd>菜单44</dd></dl><dl><dt onclick="click2（this）">3菜单条3</dt><dd>菜单12</dd><dd>菜单23</dd><dd>菜单34</dd><dd>菜单45</dd></dl></body> </html>

点击后：设置背景颜色（css设置）

如何利用javascript制作下拉列表中显示树形菜单，相信大家通过这篇文章应该有了大概的思路，也相信大家制作的下拉列表中显示树形菜单效果比小编做的还精致。