一个简单的js树形菜单
我练习一下，以免不时之需。
树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。
上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ font-size: 12px;}
h2,h3{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none; }
#outer_wrap li{ padding-left: 30px; line-height: 24px;}
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>
<h2>标题1</h2>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>
<h3>标题1_1</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
<li>
<h3>标题1_2</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
var innerText = document.innerText ? 'innerText' : 'textContent';
var span = document.createElement('span');
span[innerText] = '-';
span.className = 'controlSymbol';
function $(id){
return document.getElementById(id);
}
function $_(){
var args = arguments;
var ret = [];
for(var i = 0; i < args.length; i++){
var temp = document.getElementsByTagName(args[i]);
try{
ret = ret.concat(Array.prototype.slice.call(temp,0));
}catch(e){
for(var j = 0; j < temp.length; j++){
ret.push(temp[j]);
}
}
}
return ret;
}
function addSymbol(h){
var innerSpan = span.cloneNode(true);
h.insertBefore(innerSpan,h.firstChild);
}
function next(el){
while(el.nextSibling){
if(el.nextSibling.nodeType == 1){
return el.nextSibling;
}
el = el.nextSibling;
}
return null;
}
var outerWrap = $('outer_wrap');
var hs = $_('h2','h3');
for(var i = 0 ; i < hs.length; i++){
addSymbol(hs[i]);
}
outerWrap.onclick = function(event){
event = event || window.event;
var t = event.target || event.srcElement;
if(t.className == 'controlSymbol'){
var sn = next(t.parentNode);
var snStyle = next(t.parentNode).style;
snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block';
t[innerText] = t[innerText] == '+' ? '-':'+';
}
}
不过用的多的可能是动态的添加菜单，也就是动态的生成HTML序列。
var tree = {
'标题2':[
'内容1',
'内容2',
'内容3',
'内容4',
{'标题2_1':['内容2_1','内容2_2','内容2_3','内容2_4']},
{'标题2_2':['内容2_1','内容2_2','内容2_3','内容2_4']},
'内容5'
]
}
var fragment = document.createElement('ul');
function concatTree(tree){
var array = [];
for(var key in tree){
array.push('<li><h3>');
array.push(key);
array.push('</h3><ul>');
for(var i = 0; i < tree[key].length; i++){
if(tree[key][i].constructor == Object){
array = array.concat(concatTree(tree[key][i]));
}else{
array.push('<li>');
array.push(tree[key][i]);
array.push('</li>');
}
}
array.push('</ul></li>');
}
return array;
}
fragment.innerHTML = concatTree(tree).join('');
$('outer_wrap').appendChild(fragment.firstChild);
var oArray = {
thead : ['标题一','标题二','标题三','标题四'],
tbody : [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20],
[21,22,23,24]
],
tfoot : [25,26,27,28]
}
function createTable(arr){
var html = [];
html.push('<table>');
for(var key in arr){
html.push('<'+key + '>');
if(key == 'thead'){
assemTag(arr[key],html,'th')
}else if(key == 'tfoot'){
assemTag(arr[key],html,'td')
}else if(key == 'tbody'){
for(var k = 0, len_1 = arr[key].length; k < len_1; k++){
assemTag(arr[key][k],html,'td')
}
}
html.push('</'+key + '>');
}
html.push('</table>');
var temp = document.createElement('div');
temp.innerHTML = html.join('');
return temp.firstChild;
}
function assemTag(array,html,tag){
html.push('<tr>');
var s = '<' + tag + '>';
var e = '</' + tag + '>';
for(var j = 0, len = array.length; j < len; j++){
html.push(s);
html.push(array[j]);
html.push(e);
}
html.push('</tr>');
}
document.body.appendChild(createTable(oArray));
一般可以直接创建一个节点元素，然后直接设置innerHTML，不过innerHTML虽说是IE先搞起的，但是IE又最不彻底，对于table和tr是不可设置innerHTML的（只读），所以只能假div之手了。
相关推荐
-
Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
-
json+jQuery实现的无限级树形菜单效果代码
本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
Vue.js组件tree实现无限级树形菜单
分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
-
Bootstrap树形菜单插件TreeView.js使用方法详解
jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.
-
javascript实现在下拉列表中显示多级树形菜单的方法
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
-
JavaScript递归算法生成树形菜单
本文实例为大家分享了js生成树形菜单的具体代码,供大家参考,具体内容如下 1.最终效果图(这里仅为实现算法,并加载至页面,不做任何css界面优化) 注释:本示例包含三级目录菜单,但实际上可支持N级(可使用该代码自行测试) 2.数据源 菜单信息一般来源于数据库中数据表,且为自连接表,其中包含主要字段(主键,菜单名称,父级id): 本示例在前端页面中使用对象数组模拟从数据库获取菜单信息: var menuArry = [ { id: 1, name: "办公管理", pid: 0 }, {
-
JS无限极树形菜单,json格式、数组格式通用示例
修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
JS+CSS实现TreeMenu二级树形菜单完整实例
本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &
-
JS+CSS简单树形菜单实现方法
本文实例讲述了JS+CSS简单树形菜单实现方法.分享给大家供大家参考.具体如下: 这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下
-
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代