jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果

更新時(shí)間：2015年09月14日 09:25:51 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果,通過(guò)簡(jiǎn)單的jQuery鏈?zhǔn)讲僮鲗?shí)現(xiàn)針對(duì)頁(yè)面元素的遍歷及樣式動(dòng)態(tài)變換功能,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果。分享給大家供大家參考。具體如下：

這是一款基于jQuery實(shí)現(xiàn)的導(dǎo)航欄，鼠標(biāo)點(diǎn)擊后展開隱藏的列表內(nèi)容，用來(lái)制作一個(gè)目錄是最合適不過(guò)的選擇。本例是鋒利的jQeury中的一個(gè)實(shí)例，這是最終的優(yōu)化版本，兼容性還示曾測(cè)試，在火狐的表現(xiàn)尚不知情，有興趣的朋友可測(cè)試或修正。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jquery導(dǎo)航欄</title>
<style type="text/css">
#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;
}
</style>
<!-- 引入 jQuery -->
<script src="jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
 $(".has_children").click(function(){
  $(this).addClass("highlight")//為當(dāng)前元素增加highlight類
   .children("a").show().end()//將子節(jié)點(diǎn)的a元素顯示出來(lái)并重新定位到上次操作的元素
  .siblings().removeClass("highlight")//獲取元素的兄弟元素，并去掉他們的highlight類
   .children("a").hide();//將兄弟元素下的a元素隱藏
 });
});
</script>
</head>
<body>
<div id="menu">
 <div class="has_children">
  <span>第1章-認(rèn)識(shí)jQuery</span>
  <a>1.1-JavaScript和JavaScript庫(kù)</a>
  <a>1.2-加入jQuery</a>
  <a>1.3-編寫簡(jiǎn)單jQuery代碼</a>
 </div>
 <div class="has_children">
  <span>第2章-jQuery選擇器</span>
  <a>2.1-jQuery選擇器是什么</a>
  <a>2.2-jQuery選擇器的優(yōu)勢(shì)</a>
  <a>2.3-jQuery選擇器</a>
  <a>2.4-應(yīng)用jQuery改寫示例</a>
 </div>
 <div class="has_children">
  <span>第3章-jQuery中的DOM操作</span>
  <a>3.1-DOM操作的分類</a>
  <a>3.2-jQuery中的DOM操作</a>
 </div>
</div>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: