javascript树形菜单简单实例
参考博客地址：http://chengyoyo2006.blog.163.com/blog/static/8451734820087843950604/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tree menu by jiarry</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="Javascript" type="text/Javascript">
/**
* 隐藏或者显示菜单
* divId 子菜单所在的div元素名称
* iconId 父菜单标志（+或者-）元素名称
*/
function showhide_obj(divId, iconId) {
var obj = document.getElementById(divId);
if (obj.style.display == "none") {
open_menu(divId, iconId);
} else {
hide_menu(divId, iconId);
}
}
function set_initialization(obj,icon) {
//设置初始状态,打开第一个层;
obj = document.getElementById(obj);
icon = document.getElementById(icon);
obj.style.display = "block";
icon.src = "images/icon/minus.gif";
}
function show_this(obj) {
alert(obj);
return false;
}
// 收起所有菜单
function hide_all_menu() {
hide_menu("title1", "icon1");
hide_menu("title2", "icon2");
hide_menu("title3", "icon3");
hide_menu("title4", "icon4");
}
// 收起单个菜单
function hide_menu(divId, iconId) {
var obj1 = document.getElementById(divId);
var icon1 = document.getElementById(iconId);
obj1.style.display = "none";
icon1.innerHTML = "+";
}
//展开所有菜单
function open_all_menu() {
open_menu("title1", "icon1");
open_menu("title2", "icon2");
open_menu("title3", "icon3");
open_menu("title4", "icon4");
}
//展开单个菜单
function open_menu(divId, iconId) {
var obj1 = document.getElementById(divId);
var icon1 = document.getElementById(iconId);
obj1.style.display = "block";
icon1.innerHTML = "-";
}
</script>
<style type="text/css">
span{ width:100px;Height:25px;margin-left:15px;}
font{font-weight:bold;}
body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:#333333;}
div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#D3F7FE ;width:120px;}
pre{background-color:#FFFFF1; border:1px solid gray;color:blue;font-family:verdana;Arial;padding:20px;}
</style>
</head>
<body onload="set_initialization('title1', 'icon1');">
<div style="line-height:25px;" id="title_first" onClick="hide_all_menu()"><font id='icon_all'>+</font>收起所有栏目</div>
<div style="line-height:25px;" id="title_all">
<div style="line-height:25px;" OnClick="showhide_obj('title1','icon1')"><font id='icon1'>+</font>栏目一</div>
<div id="title1" style="background-color:#fffff3;line-height:22px;display:none;">
<span id="menu1_1" Onclick="show_this('select1_1')"><font id='select1_1'></font>菜单一</span></font><br />
<span id="menu1_2" Onclick="show_this('select1_2')"><font id='select1_2'></font>菜单二</span></font><br />
<span id="menu1_3" Onclick="show_this('select1_3')"><font id='select1_3'></font>菜单三</span></font><br />
</div>
<div style="line-height:25px;" OnClick="showhide_obj('title2','icon2')"><font id='icon2'>+</font>栏目二</div>
<div id="title2" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=m"enu2_1" Onclick="show_this('select2_1')"><font id='select2_1'></font>菜单一</span></font><br />
<span id="menu2_2" Onclick="show_this('select2_2')"><font id='select2_2'></font>菜单二</span></font><br />
<span id="menu2_3" Onclick="show_this('select2_3')"><font id='select2_3'></font>菜单三</span></font><br />
</div>
<div style="line-height:25px;" OnClick="showhide_obj('title3','icon3')"><font id='icon3'>+</font>栏目三</div>
<div id="title3" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu3_1 Onclick="show_this('select3_1')"><font id='select3_1'></font>菜单一</span></font><br />
<span id=menu3_2 Onclick="show_this('select3_2')"><font id='select3_2'></font>菜单二</span></font><br />
<span id=menu3_3 Onclick="show_this('select3_3')"><font id='select3_3'></font>菜单三</span></font><br />
</div>
<div style="line-height:25px;" OnClick="showhide_obj('title4','icon4')"><font id='icon4'>+</font>栏目四</div>
<div id="title4" style="background-color:#fffff3;line-height:22px;display:none;">
<span id=menu4_1 Onclick="show_this('select4_1')"><font id='select4_1'></font>菜单一</span></font><br />
<span id=menu4_2 Onclick="show_this('select4_2')"><font id='select4_2'></font>菜单二</span></font><br />
<span id=menu4_3 Onclick="show_this('select4_3')"><font id='select4_3'></font>菜单三</span></font><br />
<span id=menu4_4 Onclick="show_this('select4_4')"><font id='select4_4'></font>菜单三</span></font><br />
<span id=menu4_5 Onclick="show_this('select4_5')"><font id='select4_5'></font>菜单三</span></font><br />
<span id=menu4_6 Onclick="show_this('select4_6')"><font id='select4_6'></font>菜单三</span></font><br />
</div>
</div>
<div style="line-height:25px;" id="title_last" onClick="open_all_menu()"><font id='icon_all'>+</font>展开所有栏目</div>
</body>
</html>
初始化时：
展开所有菜单时：
javascript树形菜单简单实例的更多相关文章
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- javascript 树形菜单
1. [代码][JavaScript]代码 var ME={ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},html:function(da,f){var s='& ...
- 实用的树形菜单控件tree
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview jQuery jstree jsTree ...
- html树形菜单控件
html树形菜单控件 链接 http://www.ithao123.cn/content-713974.html jQuery plugin: Treeview 这个插件能够把无序 ...
- 【转】html树形菜单控件
Query plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. 主页:http://bassistance.de/jQuery-plugins/jquery-pl ...
- CSS之简单树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- 构建简单的json树形菜单
json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func: ...
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
随机推荐
- CentOS中yum安装软件时报错：No package XXX available
yum 安装软件时,报错:No package XXX available. [root@localhost ~]# yum -y install redis Loaded plugins: fast ...
- Access中多表内联的SQL写法
在Access中多表内联,可以使用传统的where条件逐行筛选,如: SELECT SNAME,CNAME,DEGREE FROM STUDENT,COURSE,SCORE where student ...
- 意外的节点类型 Element。只能在简单内容或空内容上调用 ReadElementString 方法
问题出现的情景: 在调用携程团购接口时,需要把获取的xml字符串反序列化实体对象,出现了这个错误. 详情: 在对xml文档有这样一条语句“ <Description Category=" ...
- Java 之 I/O 系列 02 ——序列化（一）
Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 一 序列化概述 序 ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- 【转】Session ID/session token 及和cookie区别
Session + Cookie 知识收集! cookie机制采用的是在客户端保持状态的方案.它是在用户端的会话状态的存贮机制,他需要用户打开客户端的cookie支持.cookie的作用就是为了解决 ...
- CSS 收集
margin:0 auto margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right, 因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居 ...
- PHP中MySql函数收集
1.array mysql_fetch_assoc ( resource $result ) 从结果集中取得一行作为关联数组 说明: 返回对应结果集的关联数组,并且继续移动内部数据指针. 参数:re ...
- [转]Linux下用gcc/g++生成静态库和动态库(Z)
Linux下用gcc/g++生成静态库和动态库(Z) 2012-07-24 16:45:10| 分类: linux | 标签:链接库 linux g++ gcc |举报|字号 订阅 ...
- EF的Model First
一,添加ADO.NET实体数据模型(即edmx) 1,添加edmx 新建一个类库项目,项目中添加新项,选择数据/ADO.NET实体数据模型,如下图. 点击添加,实体数据模型向导窗口 ...