javascript 静态树菜单实现代码

谁有兴趣的话可以改成动态加载数据，或者用jquery，代码肯定会少很多！我发现添加一些css，这棵树在静态页面还是大有用途的！

.expand{
cursor:pointer;
}
.hide{
cursor:pointer;
}

function toggleChild(o)
{
var cls = o.getAttribute("class");
if (cls == "expand")
{
var sb = o.nextSibling;
if (window.innerWidth) sb = sb.nextSibling;
while (sb != null && sb.tagName.toLowerCase() == 'dd')
{
sb.style.display = "none";
sb = sb.nextSibling;
if (window.innerWidth) sb = sb.nextSibling;
}
o.removeAttribute("class");
o.setAttribute("class", "hide");
if (window.innerWidth) //ff
o.textContent = "田" + o.textContent.substring(1);
else
o.innerText = "田" + o.innerText.substring(1);
}
else
{
var sb = o.nextSibling;
if (window.innerWidth) sb = sb.nextSibling;
while (sb != null && sb.tagName.toLowerCase() == 'dd')
{
sb.style.display = "";
sb = sb.nextSibling;
if (window.innerWidth) sb = sb.nextSibling;
}
o.removeAttribute("class");
o.setAttribute("class", "expand");
if (window.innerWidth) //ff
o.textContent = "曰" + o.textContent.substring(1);
else
o.innerText = "曰" + o.innerText.substring(1);
}
}
function maketree(obj)
{
var dts = obj.getElementsByTagName('dt');
for (var i = 0; i

定义列表也能变成一棵树：

菜单1
1.1 aaa
1.2 bbb
1.3 ccc
菜单2
2.1 你好
超链接
菜单3
3.1
百度新闻
搜狐新闻
3.2
百度新闻
搜狐新闻

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面

    想要实现 TreeGrid的效果,打开官方例子却看不到效果,怎么办呢?我是这样实现的 复制代码 代码如下: var root = new Ext.tree.TreeNode({ text: '根节点', expanded: true }); tree.setRootNode(root); var nodes = {}; nodes.children = mydata;/*TreeGrid的json数据[{--},{--}]*/ function appendChild(node, o) { if

  • 禁止IIS缓存静态文件的方法(png,js,html等)

    禁止IIS缓存静态文件的方法(png,js,html等)

    禁止IIS缓存静态文件(png,js,html等)背景:IIS为了提高性能,默认情况下会对静态文件js,html,gif,png等做内部缓存,这个缓存是在服务器iis进程的内存中的.IIS这么做在很大程度上可以提高静态文件的访问性能,在正常情况下只要静态文件更新了IIS也会更新缓存.但是如果更新的静态文件很多就有可能出现缓存不更新的情况. 弯路:我遇到这样一个场景,服务器循环更新上万张股票行情图片,IIS也会对图片进行缓存,由于更新的频率很高,文件很多,就出现了IIS缓存文件超过几十分钟都无法更

  • Flow之一个新的Javascript静态类型检查器

    Flow之一个新的Javascript静态类型检查器

    今天我们兴奋的发布了 Flow 的尝鲜版,一个新的Javascript静态类型检查器.Flow为Javascript添加了静态类型检查,以提高开发效率和代码质量.更明确的说,静态类型检查提供的好处像早期错误检查,帮助你发现一些只有在运行时才能发现的错误,以及代码智能感知,它会帮助代码维护,查找,重构和优化. 我们设计Flow的所有功能构建在现有Javascript规范之上.因为Flow主动地在后台工作,所以额外的编译开销很小.Flow并不要求开发者如何编写代码 -- 她用一套复杂的算法分析你熟悉

  • jsp中include指令静态导入和动态导入的区别详解

    jsp中include指令静态导入和动态导入的区别详解

    1.什么是静态导入? 静态导入指的是,将一个外部文件嵌入到当前JSP文件中,同时解析这个页面的JSP语句,它会把目标页面的其他编译指令也包含进来.include的静态导入指令使用语法: 复制代码 代码如下: <%@include file="relativeURLSpec"%> 静态导入使用范例include1.jsp: 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8" langu

  • Javascript获取HTML静态页面参数传递值示例

    给大家看一下我的代码 只要把这些代码嵌入到页面文件即可 例一 利用正则表达式来获取 复制代码 代码如下: var LocString = String(window.document.location.href); function getQueryStr(str) { var rs = new RegExp("(^|)" + str + "=([^&]*)(&|$)", "gi").exec(LocString), tmp; i

  • js静态方法与实例方法分析

    js静态方法 复制代码 代码如下: function foo(){} // 声明类 foo.method = function(){} // 方法体 使用:foo.method() js实例方法 function foo(){ // 声明类 this.method = function(){ // 方法体 } } 使用:var f = new foo(); f.method();

  • AngularJS入门教程（一）：静态模板

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. 复制代码 代码如下: git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html 复制代码 代码如下: <ul>  

  • JavaScript静态类型检查工具FLOW简介

    Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可以帮助我们捕获JavaScript开发中的常见错误,而不需要额外地修改你原有的代码,比如静态类型转换,空值引用等问题. 同时,Flow为JavaScript添加了静态类型的语法标识,这样开发者便可以明确代码中的类型,让其自动地被Flow所维护. 目前,Flow具有以下两特性: 1. Flow的类型检查具有可选性 除非你明确告诉Flow需要对某些文件

  • JSP中动态include与静态include的区别介绍

    动态INCLUDE 用法:<jsp:include page="included.jsp" flush="true" /> 说明:它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数,先编译之后再进行处理. 原因:1.静态include的结果是把其他jsp引入当前jsp,两者合为一体. 2.静态include纯粹是把代码写在外面的一种共享方法,所有的变量都是可以和include它的主文件共享,两者高度紧密结合,不能有变量同名的冲突.而页面设

  • javascript 静态树菜单实现代码

    谁有兴趣的话可以改成动态加载数据,或者用jquery,代码肯定会少很多!我发现添加一些css,这棵树在静态页面还是大有用途的! .expand{ cursor:pointer; } .hide{ cursor:pointer; } function toggleChild(o) { var cls = o.getAttribute("class"); if (cls == "expand") { var sb = o.nextSibling; if (window.

  • JavaScript 下拉菜单实现代码

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • javascript 树形导航菜单实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript 无限联动菜单效果代码

    Selects *{font-size:14px;} select{height:20px;font-size:12px;} 2级联动 3级联动 4级联动 5级联动 var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([

  • JavaScript实现的经典文件树菜单效果

    JavaScript实现的经典文件树菜单效果

    本文实例讲述了JavaScript实现的经典文件树菜单效果.分享给大家供大家参考.具体如下: 这是一款简单的JavaScript文件树菜单,经典的树形菜单,特别是文件夹的样式比较经典,折叠和展开也很流畅自然,不过本款菜单有一个缺点,就是菜单的数据写在JS的数组里,这样一来多多少少对菜单内容的修改造成一定麻烦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-file-tree-style-menu-codes/ 具体代码如下: <!DO

  • JavaScript简单下拉菜单实例代码

    JavaScript简单下拉菜单实例代码

    本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • Layui tree 下拉菜单树的实例代码

    1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" cont

  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • javascript实现的全国省市县无刷新多级关联菜单效果代码

    javascript实现的全国省市县无刷新多级关联菜单效果代码

    本文实例讲述了javascript实现的全国省市县无刷新多级关联菜单效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>全国省市县无刷新多级关联菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body,

  • JavaScript下拉菜单功能实例代码

    本文给大家分享一段实例代码关于js实现下拉菜单功能,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo

随机推荐