用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>

赞 (0)

相关推荐

  • 用JS实现一个TreeMenu效果分享

    今天学的一点小东西和大家分享一下. 类似TreeMenu控件. 不废话直接代码: 复制代码 代码如下: <script language="javascript"> function control() {//定义函数 if (sMenus3.innerHTML == "+") {//判断展开状态 ulMenu3.style.display = "block";//如果是"+"号 则可以展开 sMenus3.inn

  • js实现省市级联效果分享

    本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> var shengArr =new Array(); shengArr[&qu

  • js实现tab切换效果

    js实现tab切换效果

    效果如下: 代码如下: <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>js封装一个tab效果</title> <style type="text/css"> *{margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} .wrapper

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

  • 如何利用JS实现一个可左右拉伸的滑块效果

    如何利用JS实现一个可左右拉伸的滑块效果

    目录 前言 需求 方案 源码 后言 总结 前言 上月我一朋友,让我帮他实现一个效果,话说是他公司产品觉得自家项目的制作gif功能用户体验差,看到了别人的效果,于是就"挥刀霍霍"向了我那朋友,具体我们看下效果. 别人家的效果 自家的效果 用的是 element ui的 滑块 果然还是别人家的效果,话说这个忙还是得帮,下面开始正题 需求 动手之前我们先捋一捋需求 滑块不能超出临界值(不能滑出轨道) 手动进行向左.向右.滑块整体左右滑动 鼠标对滑块左按钮.右按钮.中间按钮 分别可以向左拉伸.

  • js游戏人物上下左右跑步效果代码分享

    js游戏人物上下左右跑步效果代码分享

    本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

  • 一个简易的js图片轮播效果

    一个简易的js图片轮播效果,话不多说,代码献上. 只有img标签的html代码,做测试用: <body> <img src="images/class1-1.jpg" id="img"> </body> 下面是js代码: var k=0; //当前的索引 var ss = new Array(); //数组,用来存放图片 ss[0] = "images/class1-1.jpg"; ss[1] = "

  • JS文字球状放大效果代码分享

    JS文字球状放大效果代码分享

    很酷的放大镜放大文字的效果,超赞! 先展示一下效果图: 大家先运行代码试一试-------------------------------------效果演示------------------------------------------- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta http-equiv="imagetoolbar" content="no

  • JS+CSS实现TreeMenu二级树形菜单完整实例

    JS+CSS实现TreeMenu二级树形菜单完整实例

    本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &

  • 用js实现放大镜的效果的简单实例

    用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

随机推荐