jquery實(shí)現(xiàn)的樹形目錄實(shí)例
更新時(shí)間：2015年06月26日 09:10:03 作者：wif
這篇文章主要介紹了jquery實(shí)現(xiàn)的樹形目錄,涉及jquery針對頁面元素及鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)的樹形目錄。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!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>
<div 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>
</div>
</body>
</html>
運(yùn)行效果如下圖所示：
希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery 操作日期、星期、元素的追加的實(shí)現(xiàn)代碼
主要實(shí)現(xiàn)日期的顯示，獲取年月日，時(shí)分秒、星期、判斷閏年，學(xué)習(xí)jquery的朋友可以參考下2012-02-02
這篇文章主要介紹了jQuery實(shí)現(xiàn)折線圖的方法,涉及jQuery及相關(guān)插件的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jQuery獲取當(dāng)前點(diǎn)擊的對象元素(實(shí)現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨Query獲取當(dāng)前點(diǎn)擊的對象元素(實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
jQuery+css實(shí)現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
html中的input標(biāo)簽的checked屬性jquery判斷代碼
input 標(biāo)簽具有checked屬性，而當(dāng)input標(biāo)簽的type屬性設(shè)為button時(shí)，如果給input標(biāo)簽的checked屬性賦值時(shí)，在vs中會報(bào)錯(cuò)，提示 特性checked不是元素input的有效特性2012-09-09
雖然圓角頁面很好看，但一直以來都不太好實(shí)現(xiàn)，一方面是沒有CSS3，二是都得通過美工切圖切出來角。但這些麻煩事即將過去，就是因?yàn)樗簀Query Corner的出現(xiàn)！2014-08-08
jQuery實(shí)現(xiàn)仿Google首頁拖動效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Google首頁拖動效果的方法,涉及jQuery操作鼠標(biāo)事件及div層的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JQuery中Bind()事件用法,實(shí)例分析了Bind()事件的功能、特點(diǎn)與綁定事件時(shí)的使用技巧,需要的朋友可以參考下2015-05-05
本文翻譯自 Lazy Load Plugin for jQuery, 介紹一個(gè) jQuery 插件, 它提供懶漢式加載頁面圖片的功能.2010-02-02
這篇文章主要介紹了jquery移動節(jié)點(diǎn)的實(shí)現(xiàn)方法,主要涉及append()方法的使用技巧,需要的朋友可以參考下2015-01-01