快捷導(dǎo)航

javascript下拉列表中顯示樹(shù)形菜單的實(shí)現(xiàn)方法

更新時(shí)間：2015年11月17日 17:00:33 作者：YX_blog

這篇文章主要介紹了javascript下拉列表中顯示樹(shù)形菜單的實(shí)現(xiàn)方法，需要的朋友可以參考下

很簡(jiǎn)單的一個(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)先級(jí)問(wèn)題，必須要寫*/ 
  overflow:hidden; 
  } 
  dd{ 
  margin:0px; 
  padding:0px; 
  } 
  .close{ 
  height:18px;/*優(yōu)先級(jí)問(wèn)題，必須要寫*/ 
  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); 
   //※※通過(guò)傳進(jìn)的對(duì)象 判斷采用哪種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測(cè)試，可以然后采用編程使用--> 
 <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è)置）