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:
时间： 2024-08-03 05:48:27