用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 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
使用adodb lite解决问题
2006/12/31 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
详解YII关联查询
2016/01/10 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
关于Python 3中print函数的换行详解
2017/08/08 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python Map 函数的使用
2020/08/28 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
C#中的验证控件有几种
2014/03/08 面试题
主题婚礼策划方案
2014/02/10 职场文书
业务员简历自我评价
2014/03/06 职场文书
实习生工作证明范本
2014/09/14 职场文书
督导岗位职责范本
2015/04/10 职场文书
《失物招领》教学反思
2016/02/20 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL