本文實例講述了jQuery實現的無限級下拉菜單功能。分享給大家供大家參考，具體如下：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>下拉菜單(無限級)</title><style>*{ padding: 0; margin: 0;}li{ list-style-type: none;}body{ margin: 50px;}.hide{ display: none;}.menu{ cursor: pointer;}</style></head><body><ul> <li class="menu" style="float: left;"> <span>一級菜單</span> <ul class="hide"> <li class="menu"> <span>二級菜單</span> <ul class="hide"> <li class="menu"> <span>三級菜單</span> <ul class="hide"> <li class="menu"> <span>四級菜單</span> <ul class="hide"> <li class="menu"><span>五級菜單</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li class="menu" style="float: left;"> <span>一級菜單</span> <ul class="hide"> <li class="menu"> <span>二級菜單</span> <ul class="hide"> <li class="menu"> <span>三級菜單</span> <ul class="hide"> <li class="menu"> <span>四級菜單</span> <ul class="hide"> <li class="menu"><span>五級菜單</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li></ul><script src="jquery-1.7.2.min.js"></script><script>$(function(){ var menu = $('.menu'); menu.hover(function(){ $(this).children('ul').show(); },function(){ $(this).children('ul').hide(); });});</script></body></html>運行效果圖如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
