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


Posted in Javascript onNovember 17, 2015

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

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

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

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

实现效果:

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

<!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下拉列表中显示树形菜单的实现方法

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

Javascript 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
微信小程序对接七牛云存储的方法
Jul 30 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
详解.vue文件解析的实现
Jun 11 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 #Javascript
jquery可定制的在线UEditor编辑器
Nov 17 #Javascript
JS实现选项卡实例详解
Nov 17 #Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 #Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 #Javascript
Jquery easyui 实现动态树
Nov 17 #Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 #Javascript
You might like
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Python爬虫中urllib库的进阶学习
2018/01/05 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python批量赋值操作实例
2018/10/22 Python
详解python之heapq模块及排序操作
2019/04/04 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
医大实习自我鉴定
2013/12/07 职场文书
投标授权委托书范文
2014/08/02 职场文书
导游词范文
2015/02/13 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
2019 入党申请书范文
2019/07/10 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python