suchen

Heim >Web-Frontend >js-Tutorial >Implementierungsmethode zum Anzeigen des Baummenüs in der Javascript-Dropdown-Liste_Javascript-Fähigkeiten

Implementierungsmethode zum Anzeigen des Baummenüs in der Javascript-Dropdown-Liste_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:31:461417Durchsuche

Sehr einfach zu bedienen: Klicken Sie auf das Menü, um Folgendes anzuzeigen oder nicht.
1. Hauptzweck: Zeigt einen Menüpunkt an, klicken Sie dann darauf, um ihn auszublenden, klicken Sie erneut darauf und der folgende Inhalt wird angezeigt

Die beiden Attribute overflow:hidden und overflow="visible" werden in der angeklickten Funktion verwendet, die Einstellungsattribute sollten

sein

node.style.overflow="visible"; Natürlich ist es auch sehr wichtig, die Höhe von tr festzulegen, nur damit andere Optionen ausgeblendet werden können

2. Verwenden Sie dieselbe Technologie und fügen Sie ein paar weitere hinzu, aber die Übergabe von Parametern ist sehr häufig Realisierungseffekt:

Nach dem Klicken: Hintergrundfarbe festlegen (CSS-Einstellung) 
<!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>

Wie man mit Javascript ein baumförmiges Menü in einer Dropdown-Liste erstellt, wird Ihnen meiner Meinung nach durch diesen Artikel eine allgemeine Vorstellung vermitteln. Die von Ihnen erstellte Down-Liste ist exquisiter als das, was ich erstellt habe.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie JavaScript, um den Dropdown-Listeneffekt von HTML zu verschönern. Wählen Sie tag_javascript-Fähigkeiten ausNächster Artikel：Verwenden Sie JavaScript, um den Dropdown-Listeneffekt von HTML zu verschönern. Wählen Sie tag_javascript-Fähigkeiten aus

In Verbindung stehende Artikel

Mehr sehen