快捷導(dǎo)航

javascript下拉列表菜單的實(shí)現(xiàn)方法

更新時(shí)間：2015年11月18日 14:29:05 投稿：lijiao

這篇文章主要介紹了javascript下拉列表菜單的實(shí)現(xiàn)方法，采用table來(lái)封裝，我們知道table的每一行寫(xiě)滿了之后，下一行會(huì)自動(dòng)添加，文章末尾附有完整的代碼，需要的朋友可以參考下

之前寫(xiě)過(guò)這個(gè)《javascript下拉列表中顯示樹(shù)形菜單的實(shí)現(xiàn)方法》菜單的體現(xiàn)，但是在寫(xiě)了之后就發(fā)現(xiàn)了，不太適合，高度要精準(zhǔn)控制，并且還不是很好看?，F(xiàn)在采用table來(lái)封裝，我們知道table的每一行寫(xiě)滿了之后，下一行會(huì)自動(dòng)加，這個(gè)比之前我們自己制定高度好很多。
1、點(diǎn)擊之后都可以并存的情況（只需函數(shù)寫(xiě)法不一樣就可）
dispaly也是自己設(shè)置的，通過(guò)父節(jié)點(diǎn)來(lái)操作子節(jié)點(diǎn)，顯示與否；

/* function open1(node){ 
   
   //通過(guò)父節(jié)點(diǎn)來(lái)操作兄弟節(jié)點(diǎn) 
    
   當(dāng)點(diǎn)擊之后出現(xiàn)之后，直接就能打開(kāi)但是要求在點(diǎn)開(kāi)一個(gè)時(shí)候，其余的都關(guān)掉 
 
    var nodes = node.parentNode; 
    var nn = nodes.getElementsByTagName("ul")[0]; 
    with (nn.style) { 
     display = (display == "block") ? "none" : "block"; 
    } 
   }*/ 
   </script>

2、點(diǎn)擊之后只允許打開(kāi)一個(gè)，其余的都要關(guān)掉

<script type="text/javascript"> 
    function list1(node){ 
    //這是要對(duì)全部操作，必須要得到所有的對(duì)象 （根據(jù)table 的id 來(lái)獲得） 
    //根據(jù)this判斷，不是屬于this，那么就關(guān)閉 
    //alert("aa"); 
    //1，獲得點(diǎn)擊對(duì)象的值 
    var nodes = node.parentNode;//傳入當(dāng)前的父節(jié)點(diǎn) 
    var nn = nodes.getElementsByTagName("ul")[0];//得到當(dāng)前的對(duì)象，要是遍歷所有，與這個(gè)對(duì)象一樣，就設(shè)置相反的情況，其余的全部關(guān)閉 
    //2，獲得全部對(duì)象 
    var mm = document.getElementById("menuid"); 
    var names = mm.getElementsByTagName("ul"); 
     
    //3，開(kāi)始一一配對(duì) 
    for (var x = 0; x < names.length; x++) { 
     /*這樣寫(xiě)，可以簡(jiǎn)化，利用下面的方法 
      if (names[x] == nn) { 
      if (nn.className == "open2") { 
       nn.className = "close2"; 
      } 
      else { 
       nn.className = "open2"; 
      } 
     }else { 
      nn.className = "close2"; 
     }*/ 
     if(names[x]==nn&&names[x].className!="open2"){ 
       nn.className="open2"; 
     }else{ 
       names[x].className="close2"; 
     } 
    } 
   } 
 </script>

css樣式的編寫(xiě)：

<style type="text/css"> 
  ul{ 
   list-style:none; 
   margin:0px; 
   padding:0px; 
  } 
  table{ 
   border:#00ff40 solid 1px; 
  } 
  table a{ 
   text-decoration:none; 
  } 
  table tr td ul{ 
   display:none; 
  } 
  .open2{ 
   display:block; 
   background:#8080ff; 
  } 
  .close2{ 
   display:none; 
  }

效果圖（只能開(kāi)一個(gè)的）：

完整代碼：

<!DOCTYPE html> 
<html> 
 <head> 
 <title>qqMenu.html</title> 
 <style type="text/css"> 
  ul{ 
   list-style:none; 
   margin:0px; 
   padding:0px; 
  } 
  table{ 
   border:#00ff40 solid 1px; 
  } 
  table a{ 
   text-decoration:none; 
  } 
  table tr td ul{ 
   display:none; 
  } 
  .open2{ 
   display:block; 
   background:#8080ff; 
  } 
  .close2{ 
   display:none; 
  } 
 </style> 
 <script type="text/javascript"> 
  /* function open1(node){ 
   
   //通過(guò)父節(jié)點(diǎn)來(lái)操作兄弟節(jié)點(diǎn) 
    
   當(dāng)點(diǎn)擊之后出現(xiàn)之后，直接就能打開(kāi)但是要求在點(diǎn)開(kāi)一個(gè)時(shí)候，其余的都關(guān)掉 
 
    var nodes = node.parentNode; 
    var nn = nodes.getElementsByTagName("ul")[0]; 
    with (nn.style) { 
     display = (display == "block") ? "none" : "block"; 
    } 
   }*/ 
   </script> 
   <script type="text/javascript"> 
    function list1(node){ 
    //這是要對(duì)全部操作，必須要得到所有的對(duì)象 （根據(jù)table 的id 來(lái)獲得） 
    //根據(jù)this判斷，不是屬于this，那么就關(guān)閉 
    //alert("aa"); 
    //1，獲得點(diǎn)擊對(duì)象的值 
    var nodes = node.parentNode;//傳入當(dāng)前的父節(jié)點(diǎn) 
    var nn = nodes.getElementsByTagName("ul")[0];//得到當(dāng)前的對(duì)象，要是遍歷所有，與這個(gè)對(duì)象一樣，就設(shè)置相反的情況，其余的全部關(guān)閉 
    //2，獲得全部對(duì)象 
    var mm = document.getElementById("menuid"); 
    var names = mm.getElementsByTagName("ul"); 
     
    //3，開(kāi)始一一配對(duì) 
    for (var x = 0; x < names.length; x++) { 
     /*這樣寫(xiě)，可以簡(jiǎn)化，利用下面的方法 
      if (names[x] == nn) { 
      if (nn.className == "open2") { 
       nn.className = "close2"; 
      } 
      else { 
       nn.className = "open2"; 
      } 
     }else { 
      nn.className = "close2"; 
     }*/ 
     if(names[x]==nn&&names[x].className!="open2"){ 
       nn.className="open2"; 
     }else{ 
       names[x].className="close2"; 
     } 
    } 
   } 
 </script> 
  
 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
 </head> 
 
 <body > 
 <table id="menuid"> 
  <tr> 
   <td> 
    <!--<a href="javascript:void(0)" onclick="open1(this)">同事欄</a>--> 
    <a href="javascript:void(0)" onclick="list1(this)">同事欄</a> 
    <ul > 
     <li>同事1</li> 
     <li>同事2</li> 
     <li>同事3</li> 
     <li>同事4</li> 
    </ul> 
     
   </td> 
  </tr> 
  <tr> 
   <td> 
    <!--<a href="javascript:void(0)" onclick="open1(this)">同學(xué)欄</a>--> 
    <a href="javascript:void(0)" onclick="list1(this)">同學(xué)欄</a> 
    <ul> 
     <li>同學(xué)1</li> 
     <li>同學(xué)2</li> 
     <li>同學(xué)3</li> 
     <li>同學(xué)4</li> 
    </ul> 
   </td> 
  </tr> 
  <tr> 
   <td> 
    <!--<a href="javascript:void(0)" onclick="open1(this)">黑名單欄</a>--> 
    <a href="javascript:void(0)" onclick="list1(this)">黑名單欄</a> 
    <ul> 
     <li>黑名單同學(xué)1</li> 
     <li>黑名單同學(xué)2</li> 
     <li>黑名單同學(xué)3</li> 
     <li>黑名單同學(xué)4</li> 
    </ul> 
   </td> 
  </tr> 
  
 </table> 
 </body> 
</html>

相信大家通過(guò)這兩篇文章的介紹應(yīng)該有了大概的思路，小編的這篇文章有些制作的效果略微簡(jiǎn)陋，大家可以再進(jìn)一步的完善。

您可能感興趣的文章: