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 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python内置函数dir详解
2015/04/14 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
使用TensorFlow实现SVM
2018/09/06 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
数字漫画:comiXology
2020/06/13 全球购物
params有什么用
2016/03/01 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
《木笛》教学反思
2014/03/01 职场文书
设计顾问服务计划书
2014/05/04 职场文书
小学班主任培训方案
2014/06/04 职场文书
教师节倡议书
2014/08/30 职场文书
实名检举信范文
2015/03/02 职场文书