很簡單的一個(gè)使用：點(diǎn)擊菜單，能夠顯示下面的或者不顯示。
1、主要目的：展現(xiàn)的是的一個(gè)菜單項(xiàng)，然后點(diǎn)擊一下，隱藏，點(diǎn)一下，彈出下面的內(nèi)容
用到的是 overflow：hidden 和 overflow="visible"這兩個(gè)屬性 在點(diǎn)擊的function中，設(shè)置屬性應(yīng)該
node.style.overflow="visible";當(dāng)然設(shè)置tr的高度也是很重要的，要恰好讓其他的選項(xiàng)隱蔽
2、采用同樣的技術(shù)，多加幾個(gè)，但是就是傳參數(shù)比較麻煩，采用this傳參很常用
實(shí)現(xiàn)效果：
<!DOCTYPE html> <html> <head> <title>list.html</title> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> dl{ height:18px;/*優(yōu)先級問題，必須要寫*/ overflow:hidden; } dd{ margin:0px; padding:0px; } .close{ height:18px;/*優(yōu)先級問題，必須要寫*/ overflow:hidden; } .open{ height:80px; overflow:visible; background-color:#ff8000; } </style> <script type="text/javascript"> function click2(node1){ // alert("aa"+node.nodeName);// td var nodes=node1.parentNode; // alert(nodes.nodeName); // alert("aa"+nodes.className); //※※通過傳進(jìn)的對象 判斷采用哪種css模式 if(nodes.className=="open"){ nodes.className="close"; }else{ nodes.className="open"; } } </script> </head> <body> <!--層次列表--> <!--當(dāng)很多時(shí)候采用傳參就很麻煩,每個(gè)都需要去傳參 <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">先手動(dòng)采用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> 點(diǎn)擊后：設(shè)置背景顏色（css設(shè)置）
如何利用javascript制作下拉列表中顯示樹形菜單，相信大家通過這篇文章應(yīng)該有了大概的思路，也相信大家制作的下拉列表中顯示樹形菜單效果比小編做的還精致。
新聞熱點(diǎn)
疑難解答
