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 ...
随机推荐
- 【数位统计】之【spoj1433 KPSUM】
[spoj1433]KPSUM 来源 高逸涵<数位计数问题解法研究> 由于自己的数位计数类的问题实在太差了,所以把例2用markdown抄写并补充了一遍. 题意 将写在纸上,然后在相邻的数 ...
- Eclipse 编译错误 Access restriction: The type 'JPEGCodec' is not API (restriction on required library 'C:\Program Files\Java\jre7\lib\rt.jar')
解决方案: Project -> Properties ->Java Build Path -> libraries, 先 remove 掉 JRE ...
- C#中操作txt,抛出“正由另一进程使用，因此该进程无法访问此文件”
将你的File.Create(fileName); //创建fileName路径的文本改为 1 2 3 using (FileStream fs = File.Create(fileName)){} ...
- sealed（C# 参考）
sealed 修饰符可以应用于类.实例方法和属性.密封类不能被继承.密封方法会重写基类中的方法,但其本身不能在任何派生类中进一步重写.当应用于方法或属性时,sealed 修饰符必须始终与 overri ...
- HTML5 localStorage and sessionStorage
转载至:http://blog.csdn.net/fdipzone/article/details/25517615 HTML5 提供两种web存储方法,localStorage 与 sessionS ...
- css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
通配选择符* { sRules } 类型选择符E { sRules } td { font-size:14px; width:120px; } 属性选择符 E [ attr ] { sRule ...
- [BI基础] 一些不得不了解的概念
0.Hadoop hadoop主要是用来对海量数据进行存储和计算的. 它本身是一个分布式系统,核心由分布式文件系统hdfs,和分布式计算框架mapreduce组成,在存储和计算时能够发挥出集群中每台机 ...
- 安装hadoop-2.3.0-cdh5.1.2全过程
工欲善其事,必先利其器,啥都不说,Hadoop下载:http://archive.cloudera.com/cdh5/cdh/5/ 选择好相应版本搞起,在本文讲述的是 围绕hadoop-2.3.0- ...
- JAVA读取EXCEL文件异常Unable to recognize OLE stream
异常: jxl.read.biff.BiffException: Unable to recognize OLE stream at jxl.read.biff.CompoundFile.<in ...
- thinkjs——修改where默认条件为or
写之前,得先反思一下:总以为大神同事的高冷是一种与大家格格不入的节奏,可是当自己遇到的问题难以解决的时候,大神同事一下子就让问题迎刃而解,于是,满眼的敬佩之感:一定努力当一个像大神同事一样的progr ...