一個簡單的js樹形選單

NO IMAGE

我練習一下,以免不時之需。

樹形選單不過就是把普通選單重新排列一下,看起來像樹形而已。

上圖京東的選單,給他多幾個巢狀,然後新增收縮伸展事件,差不多就行了。

給個例子:
複製程式碼 程式碼如下:
<!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之手了。

您可能感興趣的文章:

JS無限極樹形選單,json格式、陣列格式通用示例Bootstrap樹形選單外掛TreeView.js使用方法詳解json jQuery實現的無限級樹形選單效果程式碼Vue.js元件tree實現無限級樹形選單Vue.js 遞迴元件實現樹形選單(例項分享)JS CSS實現TreeMenu二級樹形選單完整例項JS CSS簡單樹形選單實現方法javascript實現在下拉選單中顯示多級樹形選單的方法JS實現無限級網頁摺疊選單(類似樹形選單)效果程式碼JavaScript遞迴演算法生成樹形選單