滿意答案

yj19791212

2014.04.21

采納率：59%????等級：12

已幫助：7421人

下面是最基本的框架，內容和樣式你需要自己調整

#tree {

width: 150px;

}

#tree, #tree ul {

list-style: none; margin: 0; padding: 0; padding: 10px;

}

#tree li {

border: 1px solid #00f; padding: 10px; cursor: pointer;

}

#tree ul {

display: none;

}

window.onload = function() {

var tree = document.getElementById("tree");

var lis = tree.getElementsByTagName("li");

for(var i = 0; i < lis.length; i++) {

(function(a) {

lis[a].onclick = function() {

if(typeof this.getElementsByTagName("ul") !== null) {

var ul_first = this.getElementsByTagName("ul")[0];

if(ul_first.style.display == "block")

ul_first.style.display = "none";

else

ul_first.style.display = "block";

}

};

})(i);

}

};

• 菜單一
  • 1-1
  • 1-2
  • 1-3
  • 1-4
• 菜單二
  • 2-1
  • 2-2
  • 2-3
  • 2-4
• 菜單三
  • 3-1
  • 3-2
  • 3-3
  • 3-4

00分享舉報

總結

以上是生活随笔為你收集整理的html左侧导航栏树状,请问这种树形结构的导航栏用html或者js怎么实现？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。