HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<style type="text/css">
ul {
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function () {
$("li:has(ul)").click(function (event) { //event表示事件对象
//js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
if (this == event.target) {//event.target属性的作用是获取到出发事件的元素
if ($(this).children().is(':hidden')) {
$(this)
.css('list-style-image', 'url(img/minus.png)')
.children().show();
} else {
$(this)
.css('list-style-image', 'url(img/plus.png)')
.children().hide();
}
}
return false; //阻止链接跳转
})
.css('cursor', 'pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image': 'none'
});
$('li:has(ul)').css({
cursor: 'default',
'list-style-image': 'url(img/plus.png)'
});
});
</script>
</head>
<body>
<fieldset>
<legend>可折叠的列表</legend>
<ul id="ul">
<li>列表1
<ul>
<li>列表1.1
<ul>
<li>列表1.1.1</li>
<li>列表1.1.2</li>
<li>列表1.1.3</li>
</ul>
</li>
<li>列表1.2</li>
<li>列表1.3</li>
</ul>
</li>
<li>列表2</li>
<li>列表2</li>
<li>列表4</li>
<li>列表5
<ul>
<li>列表1.1
<ul>
<li>列表1.1.1</li>
<li>列表1.1.2</li>
<li>列表1.1.3</li>
</ul>
</li>
<li>列表1.2</li>
<li>列表1.3</li>
</ul>
</li>
</ul>
</fieldset>
</body>
</html>
result：
eg_one：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".content").not(":first").hide();
var oNav = document.getElementById("nav");
var oLabel = oNav.getElementsByTagName("label");
var content = $(".content");
$(oLabel).click(function () {
var oLa = $(this);
var oContent = oLa.next();
content.slideUp("normal");
oContent.slideDown("slow");
})
});
</script>
<style type="text/css">
label {
font-size: 18px;
color: red;
font-weight: bold;
}
.content {
padding-left: 20px;
}
</style>
</head>
<body>
<section id="nav">
<div>
<label>第一行</label>
<div class="content">第一行的内容</div>
</div>
<div>
<label>第二行</label>
<div class="content">第二行的内容</div>
</div>
<div>
<label>第三行</label>
<div class="content">第三行的内容</div>
</div>
</section>
</body>
</html>
result:
eg_two:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
a = function (event) { //event表示事件对象
//js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
if (this == event.target) { //event.target属性的作用是获取到出发事件的元素
if ($(this).children().not(":first").is(':hidden')) {
$(this)
.css('list-style-image', 'url(img/minus.png)')
.children().not(":first").show();
} else {
$(this)
.css('list-style-image', 'url(img/plus.png)')
.children().not(":first").hide();
}
}
return false; //阻止链接跳转
}
var one = $(".li_one");
var two = $(".li_two");
one.children().has("li").hide();
two.children().has("li").hide();
one.click(a);
two.click(a);
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image': 'none'
});
$('li:has(ul)').css({
cursor: 'default',
'list-style-image': 'url(img/plus.png)'
});
});
</script>
<style type="text/css">
.li_one {
font-size: 18px;
color: black;
}
.li_two {
font-size: 16px;
color: red;
}
.li_three {
font-size: 14px;
color: darkorchid;
}
</style>
</head>
<body>
<ul>
<li class="li_one">
<label>列表1</label>
<ul>
<li class="li_two"><label>列表1.1</label>
<ul>
<li class="li_three"><label>列表1.11</label></li>
<li class="li_three"><label>列表1.12</label></li>
<li class="li_three"><label>列表1.13</label></li>
</ul>
</li>
<li class="li_two"><label>列表1.2</label>
</li>
<li class="li_two"><label>列表1.3</label>
</li>
</ul>
</li>
<li class="li_one"><label>列表2</label></li>
<li class="li_one"><label>列表3</label>
<ul>
<li class="li_two"><label>列表3.1</label>
<ul>
<li class="li_three"><label>列表3.11</label></li>
<li class="li_three"><label>列表3.12</label></li>
<li class="li_three"><label>列表3.13</label>
</li>
</ul>
</li>
<li class="li_two"><label>列表3.2</label>
</li>
<li class="li_two"><label>列表3.3</label>
</li>
</ul>
</li>
<li class="li_one"><label>列表4</label></li>
</ul>
</body>
</html>
result:
