Kaedah pelaksanaan memaparkan menu pokok dalam senarai lungsur javascript

Kaedah pelaksanaan memaparkan menu pokok dalam senarai lungsur javascript_javascript kemahiran

WBOY

Lepaskan： 2016-05-16 15:31:46

asal

1398 orang telah melayarinya

Sangat mudah untuk digunakan: klik pada menu untuk memaparkan perkara berikut atau tidak.
1. Tujuan utama: memaparkan item menu, kemudian klik untuk menyembunyikannya, klik sekali lagi dan kandungan berikut akan muncul

Dua atribut limpahan: hidden dan overflow="visible" digunakan dalam fungsi yang diklik, atribut tetapan hendaklah

node.style.overflow="visible"; Sudah tentu, menetapkan ketinggian tr juga sangat penting, hanya supaya pilihan lain boleh disembunyikan

2. Gunakan teknologi yang sama dan tambah beberapa lagi, tetapi lebih menyusahkan untuk lulus parameter Ia adalah sangat biasa untuk menggunakan ini untuk lulus parameter
.

Kesan realisasi:

<!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);// td 
   var 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>

Salin selepas log masuk

Selepas klik: tetapkan warna latar belakang (tetapan css)

Cara menggunakan javascript untuk mencipta menu berbentuk pokok dalam senarai drop-down Saya percaya anda akan mempunyai idea umum melalui artikel ini Saya juga percaya bahawa kesan menu berbentuk pokok dipaparkan dalam drop-. senarai bawah yang dibuat oleh anda adalah lebih indah daripada apa yang saya lakukan.