用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 相关文章推荐
JS中表单的使用小结
Jan 11 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
vuex实现简易计数器
Oct 27 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
destoon实现调用图文新闻的方法
2014/08/21 PHP
php实现短信发送代码
2015/07/05 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python实时获取cmd的输出
2015/12/13 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
浅析python内置模块collections
2019/11/15 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python接收手机短信的代码整理
2020/08/02 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
会计助理岗位职责
2014/02/17 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
平面设计专业求职信
2014/08/09 职场文书
邀请书模板
2015/02/02 职场文书
被告代理词范文
2015/05/25 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书