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常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
js中typeof的用法汇总
Dec 12 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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 无限级分类 获取顶级分类ID
2016/03/13 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
explicit和implicit的含义
2012/11/15 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
社区服务活动总结
2014/05/07 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技