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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
js跳转页面方法总结
Jan 29 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
JS常见构造模式实例对比分析
Aug 27 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
详解vue-flickity的fullScreen功能实现
Apr 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下的浮点运算不准的解决方法
2016/10/27 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
js实现查询商品案例
2020/07/22 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python 开发的三种运行模式详细介绍
2017/01/18 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python sorted排序方法如何实现
2020/03/31 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
Python中Selenium模块的使用详解
2020/10/09 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
机械专业求职信范文
2014/07/15 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python