用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 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
Python 学习教程之networkx
2019/04/15 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
用python进行视频剪辑
2020/11/02 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
结构和类有什么异同
2012/07/16 面试题
金融管理应届生求职信
2014/02/20 职场文书
幼儿园秋游感想
2014/03/12 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
公司请假条范文
2014/04/11 职场文书
员工安全生产责任书
2014/07/22 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python