<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title>CSS+JavaScript三级折叠菜单</title>
<style>
*,body,ul,li,h1,h2 {
margin: 0
padding: 0
list-style: none
}
body {
font: 12px "宋体"
padding-top: 20px
}
#menu {
width: 200px
margin: auto
}
#menu h1 {
cursor: pointer
color: #FFF
font-size: 12px
padding: 5px 0 3px 10px
border: #C60 1px solid
margin-top: 1px
background-color: #F93
}
#menu h2 {
cursor: pointer
color: #777
font-size: 12px
padding: 5px 0 3px 10px
border: #E7E7E7 1px solid
border-top-color: #FFF
background-color: #F4F4F4
}
#menu ul {
padding-left: 15px
height: 100px
border: #E7E7E7 1px solid
border-top: none
overflow: auto
}
#menu ul li {
padding: 5px 0 3px 10px
}
.no {
display: none
}
</style>
<script language="JavaScript">
function ShowMenu(obj, noid) {
var block = document.getElementById(noid)
var n = noid.substr(noid.length - 1)
if (noid.length == 4) {
var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul")
var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2")
for (var i = 0 i < h2.length i++) {
h2[i].innerHTML = h2[i].innerHTML.replace("+", "-")
h2[i].style.color = ""
}
obj.style.color = "#FF0000"
for (var i = 0 i < ul.length i++) {
if (i != n) {
ul[i].className = "no"
}
}
} else {
var span = document.getElementById("menu").getElementsByTagName("span")
var h1 = document.getElementById("menu").getElementsByTagName("h1")
for (var i = 0 i < h1.length i++) {
h1[i].innerHTML = h1[i].innerHTML.replace("+", "-")
h1[i].style.color = ""
}
obj.style.color = "#0000FF"
for (var i = 0 i < span.length i++) {
if (i != n) {
span[i].className = "no"
}
}
}
if (block.className == "no") {
block.className = ""
obj.innerHTML = obj.innerHTML.replace("-", "+")
} else {
block.className = "no"
obj.style.color = ""
}
}
</script>
</head>
<body>
<div id="menu">
<h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>
<span id="NO0" class="no">
<h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>
<ul id="NO00" class="no">
<li>一级菜单A_0</li>
<li>一级菜单A_1</li>
<li>一级菜单A_2</li>
<li>一级菜单A_3</li>
<li>一级菜单A_4</li>
<li>一级菜单A_5</li>
</ul>
<h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>
<ul id="NO01" class="no">
<li>一级菜单A_0</li>
<li>一级菜单A_1</li>
<li>一级菜单A_2</li>
<li>一级菜单A_3</li>
<li>一级菜单A_4</li>
</ul>
<h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>
<ul id="NO02" class="no">
<li>一级菜单A_0</li>
<li>一级菜单A_1</li>
<li>一级菜单A_2</li>
<li>一级菜单A_3</li>
<li>一级菜单A_4</li>
<li>一级菜单A_5</li>
<li>一级菜单A_6</li>
</ul>
<h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>
<ul id="NO03" class="no">
<li>一级菜单A_0</li>
<li>一级菜单A_1</li>
<li>一级菜单A_2</li>
<li>一级菜单A_3</li>
<li>一级菜单A_4</li>
<li>一级菜单A_5</li>
<li>一级菜单A_6</li>
<li>一级菜单A_7</li>
</ul>
</span>
<h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>
<span id="NO1" class="no">
<h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
<ul id="NO10" class="no">
<li>二级菜单B_0</li>
<li>二级菜单B_1</li>
<li>二级菜单B_2</li>
<li>二级菜单B_3</li>
<li>二级菜单B_4</li>
<li>二级菜单B_5</li>
<li>二级菜单B_6</li>
<li>二级菜单B_7</li>
</ul>
<h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
<ul id="NO11" class="no">
<li>二级菜单B_0</li>
<li>二级菜单B_1</li>
<li>二级菜单B_2</li>
<li>二级菜单B_3</li>
<li>二级菜单B_4</li>
<li>二级菜单B_5</li>
<li>二级菜单B_6</li>
<li>二级菜单B_7</li>
</ul>
</span>
<h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>
<span id="NO2" class="no">
<h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>
<ul id="NO20" class="no">
<li>三级菜单C_0</li>
<li>三级菜单C_1</li>
<li>三级菜单C_2</li>
<li>三级菜单C_3</li>
<li>三级菜单C_4</li>
<li>三级菜单C_5</li>
<li>三级菜单C_6</li>
<li>三级菜单C_7</li>
<li>三级菜单C_8</li>
<li>三级菜单C_9</li>
</ul>
<h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>
<ul id="NO21" class="no">
<li>三级菜单C_0</li>
<li>三级菜单C_1</li>
<li>三级菜单C_2</li>
<li>三级菜单C_3</li>
<li>三级菜单C_4</li>
</ul>
</span>
<h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>
<span id="NO3" class="no">
<h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>
<ul id="NO30" class="no">
<li>四级菜单D_0</li>
<li>四级菜单D_1</li>
<li>四级菜单D_2</li>
<li>四级菜单D_3</li>
</ul>
<h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>
<ul id="NO31" class="no">
<li>四级菜单D_0</li>
<li>四级菜单D_1</li>
<li>四级菜单D_2</li>
<li>四级菜单D_3</li>
<li>四级菜单D_4</li>
<li>四级菜单D_5</li>
</ul>
</span>
</div>
</body>
</html>
bootstrap的多级列表可以使用基于bootstrap的 metronic。制作后效果如下：
源码如下：
<div class="tree well">
<ul>
<li>
<span><i class="glyphicon glyphicon-folder-open"></i>Parent</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="glyphicon glyphicon-minus-sign"></i>Child</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="glyphicon glyphicon-minus-sign"></i>Child</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>
</li>
<li>
<span><i class="glyphicon glyphicon-minus-sign"></i>Grand Child</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="glyphicon glyphicon-minus-sign"></i>Great Grand Child</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span><a href="">Goes somewhere</a>
</li>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span><a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span><a href="">Goes somewhere</a>
</li>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span><a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span><i class="glyphicon glyphicon-folder-open"></i>Parent2</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="glyphicon glyphicon-leaf"></i>Child</span><a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</div>
====================================================
JavaScript代码：
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' >span').attr('title', 'Collapse this branch')
$('.tree li.parent_li >span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' >ul >li')
if (children.is(":visible")) {
children.hide('fast')
$(this).attr('title', 'Expand this branch').find(' >i').addClass('icon-plus-sign').removeClass('icon-minus-sign')
} else {
children.show('fast')
$(this).attr('title', 'Collapse this branch').find(' >i').addClass('icon-minus-sign').removeClass('icon-plus-sign')
}
e.stopPropagation()
})
})
=================================================
CSS样式表：
.tree {
min-height:20px
padding:19px
margin-bottom:20px
background-color:#fbfbfb
border:1px solid #999
-webkit-border-radius:4px
-moz-border-radius:4px
border-radius:4px
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
list-style-type:none
margin:0
padding:10px 5px 0 5px
position:relative
}
.tree li::before, .tree li::after {
content:''
left:-20px
position:absolute
right:auto
}
.tree li::before {
border-left:1px solid #999
bottom:50px
height:100%
top:0
width:1px
}
.tree li::after {
border-top:1px solid #999
height:20px
top:25px
width:25px
}
.tree li span {
-moz-border-radius:5px
-webkit-border-radius:5px
border:1px solid #999
border-radius:5px
display:inline-block
padding:3px 8px
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee
border:1px solid #94a0b4
color:#000
}
