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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
javascript下function声明一些小结
Dec 28 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 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获取数组中键值最大数组项的索引值
2015/03/17 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
Python读写Excel表格的方法
2021/03/02 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
实习单位接收函
2014/01/11 职场文书
计算机专业职业规划
2014/02/28 职场文书
2015元旦标语横幅
2014/12/09 职场文书
现役军人家属慰问信
2015/03/24 职场文书
师德承诺书2015
2015/04/28 职场文书
学校通报表扬范文
2015/05/04 职场文书
蜗居观后感
2015/06/11 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书