recherche

Maison >interface Web >js tutoriel >Méthode d'implémentation de l'affichage du menu arborescent dans la liste déroulante javascript list_javascript skills

Méthode d'implémentation de l'affichage du menu arborescent dans la liste déroulante javascript list_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:31:461422parcourir

Très simple à utiliser : cliquez sur le menu pour afficher ou non les éléments suivants.
1. Objectif principal : affiche un élément de menu, puis cliquez dessus pour le masquer, cliquez à nouveau dessus et le contenu suivant apparaîtra

Les deux attributs overflow : Hidden et overflow="visible" sont utilisés. Dans la fonction cliquée, les attributs de réglage doivent être

.

node.style.overflow="visible"; Bien sûr, définir la hauteur de tr est également très important, juste pour que d'autres options puissent être masquées

2. Utilisez la même technologie et ajoutez-en quelques autres, mais il est plus difficile de transmettre des paramètres. Il est très courant d'utiliser ceci pour transmettre des paramètres
.

Effet de réalisation : 

<!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>

Après clic : définir la couleur d'arrière-plan (paramètre CSS)

Comment utiliser javascript pour créer un menu en forme d'arborescence dans une liste déroulante Je pense que vous aurez une idée générale à travers cet article. Je pense également que l'effet du menu en forme d'arborescence affiché dans la liste déroulante. La liste créée par vous est plus exquise que ce que j'ai fait.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisez JavaScript pour embellir l'effet de liste déroulante des compétences HTML select tag_javascriptArticle suivant：Utilisez JavaScript pour embellir l'effet de liste déroulante des compétences HTML select tag_javascript

Articles Liés

Voir plus