用JS实现一个TreeMenu效果分享


Posted in Javascript onAugust 28, 2011

今天学的一点小东西和大家分享一下。
类似TreeMenu控件.
不废话直接代码:

<script language="javascript"> 
function control() {//定义函数 
if (sMenus3.innerHTML == "+") {//判断展开状态 
ulMenu3.style.display = "block";//如果是“+”号 则可以展开 
sMenus3.innerText = "-";//展开之后显示为减号 
} 
else { 
ulMenu3.style.display = "none";//如果为“-”号 则不能展开 
sMenus3.innerText = "+";//点击之后符号变换。 
} 
} 
</script>

Html 代码:
//这段代码没什么说的 主要就是Id 和js代码中的Id对应。
<body> 
<span id="sMenus3" style=" border:1px solid #00000; color:Blue;cursor:hand ;" onclick="control()">-</span>无网站状态<br/> 
<ul id="ulMenu3"> 
<li><a href="http://www.baidu.com" target="_blank">百度</a> </li> 
<li><a href="http://www.baidu.com" target="_parent">百度</a></li> 
<li><a href="http://www.baidu.com" target="_blank">还是百度</a></li> 
</ul> 
</body>
Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
JavaScript字符串对象
Jan 14 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JS target与currentTarget区别说明
Aug 28 #Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 #Javascript
range 标准化之获取
Aug 28 #Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 #Javascript
js中设置元素class的三种方法小结
Aug 28 #Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
You might like
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
中专自我鉴定范文
2013/10/16 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
聘任书模板
2014/03/29 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
校运会新闻稿
2015/07/17 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电