用JS实现一个TreeMenu效果分享
更新时间：2011年08月28日 18:53:54 作者：
用JS实现一个TreeMenu效果分享，思路比较简单，但很实用
今天学的一点小东西和大家分享一下。
类似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>
类似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>
相关文章
在元素间的文本就是通过对象.innerText，下面有个不错的示例，感兴趣的朋友可以参考下2014-01-01
有时候我们需要获取当前网页的网址，方便我们判断，一般情况我们都是通过location.href来获取2013-12-12
商城网站包括APP端中把鼠标光标移动到预览图上就会看到这部分商品图片放大了，这就是JavaScript实现的放大镜特效，今天我们也来实现一波2021-11-11
JavaScript是一门强行声称面向对象的语言,而继承是面向对象的一大主要特性,这里我们根据阮一峰老师的文章来看一下JavaScript程序中实现继承特性的方式总结2016-06-06
这篇文章介绍了Js中的parseInt函数，有需要的朋友可以参考一下2013-07-07
这篇文章介绍了javascript:void(0)的含义及用法实例，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-12
这篇文章主要介绍了深入学习JavaScript 高阶函数，在 JavaScript 中，函数是一种特殊类型的对象，它们是 Function objects。,需要的朋友可以参考下2019-06-06
javascript实现网页屏蔽Backspace事件，输入框不屏蔽
这篇文章主要介绍了如何实现网页屏蔽Backspace事件而输入框不屏蔽，需要的朋友可以参考下2015-07-07
鉴于有同学在学习的时候容易混肴，所以笔者还是将其加以区别,需要的朋友可以参考下2013-07-07
怎样在JavaScript里写一个swing把数据插入数据库
在JavaScript里写一个swing来实现确定取消，来决定是否执行这个功能 控制把数据插入数据库,接下来介绍实现方法2012-12-12
最新评论