本文實例講述了jquery實現鼠標點擊后展開列表內容的導航欄效果。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現的導航欄，鼠標點擊后展開隱藏的列表內容，用來制作一個目錄是最合適不過的選擇。本例是鋒利的jQeury中的一個實例，這是最終的優化版本，兼容性還示曾測試，在火狐的表現尚不知情，有興趣的朋友可測試或修正。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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導航欄</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")//為當前元素增加highlight類 .children("a").show().end()//將子節點的a元素顯示出來并重新定位到上次操作的元素 .siblings().removeClass("highlight")//獲取元素的兄弟元素，并去掉他們的highlight類 .children("a").hide();//將兄弟元素下的a元素隱藏 });});</script></head><body><div id="menu"> <div class="has_children"> <span>第1章-認識jQuery</span> <a>1.1-JavaScript和JavaScript庫</a> <a>1.2-加入jQuery</a> <a>1.3-編寫簡單jQuery代碼</a> </div> <div class="has_children"> <span>第2章-jQuery選擇器</span> <a>2.1-jQuery選擇器是什么</a> <a>2.2-jQuery選擇器的優勢</a> <a>2.3-jQuery選擇器</a> <a>2.4-應用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>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
