本文執行個體講述了jquery實作滑鼠點選後展開清單内容的導航欄效果。分享給大家供大家參考。具體如下：
這是一款基于jQuery實作的導航欄，滑鼠點選後展開隐藏的清單内容，用來制作一個目錄是最合适不過的選擇。本例是鋒利的jQeury中的一個執行個體，這是最終的優化版本，相容性還示曾測試，在火狐的表現尚不知情，有興趣的朋友可測試或修正。
運作效果截圖如下：
線上示範位址如下：
具體代碼如下：
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jquery導航欄
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
//等待dom元素加載完畢.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")//為目前元素增加highlight類
.children("a").show().end()//将子節點的a元素顯示出來并重新定位到上次操作的元素
.siblings().removeClass("highlight")//擷取元素的兄弟元素，并去掉他們的highlight類
.children("a").hide();//将兄弟元素下的a元素隐藏
});
});
第1章-認識jQuery
1.1-JavaScript和JavaScript庫
1.2-加入jQuery
1.3-編寫簡單jQuery代碼
第2章-jQuery選擇器
2.1-jQuery選擇器是什麼
2.2-jQuery選擇器的優勢
2.3-jQuery選擇器
2.4-應用jQuery改寫示例
第3章-jQuery中的DOM操作
3.1-DOM操作的分類
3.2-jQuery中的DOM操作
希望本文所述對大家的jQuery程式設計有所幫助。