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 ...
随机推荐
- selenium+python笔记1
#!/usr/bin/env python # -*- coding: utf-8 -*- """@desc: 讲讲web项目中常用的方法属性 webdriver 提供了 ...
- robotframework笔记18
测试执行 如何创建测试套件结构解析 执行测试数据,如何继续执行一个测试用例失败后, 以及如何优雅地停止整个测试执行. 执行流 执行测试套件和 总是在一个测试套件执行测试用例. 一个测试套件 创建从一个 ...
- 安装Ubuntu Linux系统时硬盘分区最合理的方法
无论是安装Windows还是Linux操作系统,硬盘分区都是整个系统安装过程中最为棘手的环节,网上的一些Ubuntu Linux安装教程一般都是自动分区,给初学者带来很大的不便,下面我就根据多年来在合 ...
- SQL Server数据库（SQL Sever语言 CRUD）
使用SQL Sever语言进行数据库的操作 常用关键字identity 自增长primary key 主键unique 唯一键not null 非空references 外键(引用) 在使用查询操作数 ...
- SQL数据库第一部分
数据库:程序用来存取数据的 ACCESS:自带,比较小,不是很专业 SQL Server:主要用在.NET语言中,比较专业.微软开发 MYSQL:主要用在PHP语言中,比SQL server体积比较小 ...
- [apache]用shell分析网站的访问情况
随着网站正式运行,我们可以通过通用的免费日志分析工具比如awstats获得一些实际访问网站的信息,例如每天ip量,pv量,用户所用的的浏览器,用户所用的操作系统等,但是有时候希望通过手工方式从WEB日 ...
- UVALive 7297 Hounded by Indecision BFS
题目链接:Hounded by Indecision 题意:map中给出小偷的位置,警察的位置.警察有一只狗,开始的时候警察和狗一起行动,也就是看做一个格子,当警察遇见小偷走过的格子时,狗就会嗅到它的 ...
- HBase High Level Architecutre
- UTF-8
UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码.由Ken Thompson于1992年创建.现在已经标准化为 ...
- Html11.09CSS层叠样式表内容整理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...