用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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JS实现京东商品分类侧边栏
Dec 11 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中strtr字符串替换用法详解
2014/11/26 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP常用的小程序代码段
2015/11/14 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
javascript的BOM
2016/05/03 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python一些性能分析的技巧
2020/08/30 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
干部作风建设工作总结
2014/10/29 职场文书
党纪处分决定书
2015/06/24 职场文书
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技