jQuery實現的二級下拉菜單詳解:二級下拉菜單在實際應用中非常的常見，比如企業網站的產品分類，或者部門分類等等，下麵就通過代碼實例詳細介紹一下簡單的二級下拉菜單是如何實現的，當然還有更為複雜的二級菜單，不過先學會如何製作簡單的才是上進之路。代碼如下: <!DOCTYPE html> <html>
jQuery實現的二級下拉菜單詳解:
二級下拉菜單在實際應用中非常的常見，比如企業網站的產品分類，或者部門分類等等，下麵就通過代碼實例詳細介紹一下簡單的二級下拉菜單是如何實現的，當然還有更為複雜的二級菜單，不過先學會如何製作簡單的才是上進之路。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> nav a{ text-decoration:none; } nav>ul>li{ float:left; text-align:center; padding:0 0.5em; width:120px; } nav li ul.sub-menu{ display:none; padding-left:0 !important; } .sub-menu li{color:white;} .sub-menu li:hover{background-color:black;} .sub-menu li:hover a{color:white;} ul{list-style: none;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.box> li').hover(function(){ $(this).find('.sub-menu').css('display', 'block'); },function(){ $(this).find('.sub-menu').css('display', 'none'); }); }); </script> </head> <body> <nav> <ul class="box"> <li><a href="#">前端專區</a> <ul class="sub-menu"> <li><a href="#">jquery教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">js教程</a></li> </ul> </li> <li><a href="#">資源專區</a> <ul class="sub-menu"> <li><a href="#">電腦模板下載</a></li> <li><a href="#">手機模板下載</a></li> <li><a href="#">特效下載</a></li> </ul> </li> <li><a href="#">交流專區</a> <ul class="sub-menu"> <li><a href="#">運營交流</a></li> <li><a href="#">seo優化</a></li> <li><a href="#">站長交流</a></li> </ul> </li> </ul> </nav> </body> </html>
以上代碼代碼可實現了我們的要求，下麵介紹一下他的實現過程。
一.實現原理:
所謂的下拉菜單就是滑鼠懸浮的時候，能偶使一個隱藏的元素顯示，這個隱藏的元素裡面的內容就是二級下拉菜單，當滑鼠離開的時候，這個元素然後隱藏，那麼二級下拉菜單也就消失了，這就是基本的原理。
二.代碼註釋:
1.<li><a href="#">前端專區</a>
<ul class="sub-menu">
<li><a href="#">jquery教程</a></li>
<li><a href="#">css教程</a></li>
<li><a href="#">js教程</a></li>
</ul>
</li>
上面的代碼是二級下拉菜單的框架，在預設狀態下，裡面的ul是隱藏的，也就是預設狀態二級下拉菜單是隱藏的。
2.$(document).ready(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
3.$('.box> li').hover(function(){}），box下的一級li元素註冊hover事件處理函數，也就是滑鼠懸浮和離開要執行的函數。
4.$(this).find('.sub-menu').css('display', 'block')，將二級菜單ul元素顯示處理。
5.function(){$(this).find('.sub-menu').css('display', 'none');})，將二級菜單隱藏。
三.相關閱讀:
1.hover()可以參閱jQuery的hover事件一章節。
2.find()函數可以參閱jQuery的find()方法一章節。
3.css()函數可以參閱jQuery的css()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13919
更多內容可以參閱:http://www.softwhy.com/jquery/
