javascript下拉列表中显示树形菜单的实现方法

前端技术 2023/09/02 JavaScript

很简单的一个使用：点击菜单，能够显示下面的或者不显示。
1、主要目的：展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow=\"visible\"这两个属性 在点击的function中，设置属性应该

node.style.overflow=\"visible\";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽

2、采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

实现效果：

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

点击后：设置背景颜色（css设置）

如何利用javascript制作下拉列表中显示树形菜单，相信大家通过这篇文章应该有了大概的思路，也相信大家制作的下拉列表中显示树形菜单效果比小编做的还精致。

本文地址：https://www.stayed.cn/item/5668

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案