jquery實現樹狀目錄步驟詳解
- php中世界最好的语言原創
- 2018-04-23 14:19:202165瀏覽
這次帶給大家jquery實現樹狀目錄步驟詳解，jquery實現樹狀目錄的注意事項有哪些，以下就是實戰案例，一起來看一下。
本文實例講述了jquery實作的樹形目錄。分享給大家供大家參考。具體實現方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.st_tree ul li
{
font-size:13px;
color:#222;
line-height:18px;
cursor:pointer;
list-style:none;
background:url(st_folder.gif);
background-repeat:no-repeat;
padding:0 0 3px 20px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ul").hide();
})
$(document).ready(function()
{
$("#li1").click(function()
{
$("#ul1").toggle();
});
});
$(document).ready(function()
{
$("#li2").click(function()
{
$("#ul2").toggle();
});
});
$(document).ready(function()
{
$("#li3").click(function()
{
$("#ul3").toggle();
});
});
</script>
<p class="st_tree">
<ul>
<li ><a href="#" >一级目录1</a></li>
<li id="li1"><a href="#" >一级目录2</a></li>
<ul show="true" id="ul1" class="ul">
<li ><a href="#" >二级目录2.1</a></li>
<li ><a href="#" >二级目录2.2</a></li>
</ul>
<li id="li2"><a href="#" >一级目录3</a></li>
<ul id="ul2" class="ul">
<li ><a href="#" >二级目录3.1</a></li>
<li ><a href="#" >二级目录3.2</a></li>
<li id="li3"><a href="#" >二级目录3.3</a></li>
<ul id="ul3" class="ul">
<li ><a href="#" >三级目录3.3.1</a></li>
<li ><a href="#">三级目录3.3.2</a></li>
</ul>
</ul>
</ul>
</p>
</body>
</html>
運行效果如下圖所示：
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是jquery實現樹狀目錄步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn