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 ...
随机推荐
- 1029c语言文法
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
- Roman to Integer [LeetCode]
Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...
- sql 语句随机时间存储过程
CREATE PROC [dbo].[Proc_GetRandomTime](@startTime datetime,@endTime datetime,@date datetime output ) ...
- Front End中Javascript兼容问题收集（转）
1 select标签,就有诸多不兼容: A. cloneNode方法,对于非IE浏览器没有问题,对于IE浏览器, 遇到的问题包括: 1)option selected的会clone不过去,然后 ...
- 利用VBoxManage对虚拟机格式vdi、vmdk、vhd进行互转
虚拟机顾名思义就是虚拟出来的机器(virtual machine),虚拟化技术也是时下IT界最热门的技术,因其能更加有效利用硬件资源,整合IT应用,降低TCO,节能环保等,说白了就是一台硬件上够强 ...
- 识别低效率的SQL语句
1.返回行与逻辑读的比率 CREATE TABLE t as select * from dba_objects; --CREATE INDEX idx ON t (object_id); ---例1 ...
- CentOS hadoop启动错误 JAVA_HOME is not set and could not be found
... Starting namenodes on [] localhost: Error: JAVA_HOME is not set and could not be found. localhos ...
- sql取年月日
Sql Server 中一个非常强大的日期格式化函数 Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CON ...
- CENTOS 修改MYSQL文件到内存盘
# 必须说明的是: # 0 内存盘的特性是断电就丢数据. # 1 对数据时效性要求高的自己做主从 # 2 重启or关机必须导出数据和开机加载数据. # 3 最好弄个脚本 开关机自己调用. # 4 简单 ...
- model.addAttribute("student",student)——渲染
往前台视图传参数,(将在处理器传入的模型数据在视图jsp中展示出来,即为渲染) 按照spring一般的编码习惯,model 应该是contrller里面的Map结构吧.Map里面添加key=" ...