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 ...
随机推荐
- 能源项目xml文件标签释义--<mvc:annotation-driven>
<mvc:annotation-driven />的可选配置 <mvc:annotation-driven message-codes-resolver ="bean re ...
- c头文件包含关系--记今天调试的郁闷经历
c头文件包含关系--记今天调试的郁闷经历 彭会锋 2016-08-05 21:54:08 c头文件的包含
- IntelliSense: 应输入声明的解决方案
出现问题的原因暂时没搞清楚,只是找到了解决方案,方案如下: 工具-->选项-->文本编辑器-->C/C++-->高级-->禁用自动更新-->True
- javascript中IE与ff的区别
1.自定义属性问题:可以使用获取常规属性的方法来获取自定义属性,也可以使用getAtribute()获取自定义属性,ff下只能使用getAttribute()获取自定义属性. 2. 在IE中可以用ev ...
- SAP 快速报表
快速报表,这个名字不知道是不是第一个用,不过以这种方式做的报表,速度确实挺快的,应该比QUERY快,还简单 T-CODE:SQVI 进入界面后,输入一个报表名称,点击新建,这时候可以选择,单表查询,链 ...
- 【转载】FLUNT温度场模拟
1. Gambit 绘制几何计算域,划分网格,定义边界类型 2. fluent设置以及计算 注意: define->models->energy 打开能量方程 de ...
- （巨坑）改了tpl文件之后，前端效果没反应
通常前端修改很小的部分代码,并不会立即显示出效果.比如,原来是 ,修改后是 虽然只是加多了一个函数,但是作用很大,这种情况下,可能是由于浏览器缓存的原因,修改后的代码没有被重新加载.这个时候,只需要在 ...
- 生JS实现jQuery的ready方法呢？下面是其中之一的做法：
function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMConten ...
- xampp搭建服务器环境、html5新的input类型
怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...
- hdu 4628 Pieces
http://acm.hdu.edu.cn/showproblem.php?pid=4628 状态压缩DP 时间复杂度应该是 16*(2^32) 但是运行时要远小于这个数 所以加一定剪枝就可以过 代码 ...