本文實例講述了jQuery實現的簡單折疊菜單(折疊面板)效果代碼。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現的折疊菜單，可展開一些內容，實際上稱它為一個面板比較好，是一個折疊面板，使用了jQuery1.6.2插件。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-simple-toggle-zd-menu-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery 折疊菜單 by Sam Zhang</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><style type="text/css">* { margin:0px; padding:0px; }body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:14px; }ul, li, p, h1, h2, h3, div, label, input, form { list-style:none; padding:0px; margin:0px; }#header { width:600px; margin:20px auto 0; color:#ffffff; background:transparent url('images/header1.jpg') repeat-x scroll left top; height:90px; line-height:90px; font-size:20px; overflow:hidden; }#header p { padding-left:15px; font-weight:bold; }#header p span.date { float:right; padding-right:15px; font-size:14px; padding-top:10px; font-weight:normal; }.content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00; border-top:none; background-color:#FFFFFF; overflow:hidden; }.toggle { width:450px; margin:20px auto; }.toggle dl dt { background:#F4FFF4 url('images/bg_toggle_up.gif') no-repeat scroll 8px 14px; height:40px; width:450px; line-height:40px; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }.toggle dl dt.current { background:#F4FFF4 url('images/bg_toggle_down.gif') no-repeat scroll 8px 14px; }.toggle dl dd { padding-left:10px; line-height:24px; }.toggle dl dd h2 { font-size:15px; }.toggle dl dd ul { padding-bottom:12px; }.toggle dl dd ul li { list-style:decimal inside none; }</style> <script type="text/javascript"> $(function(){ $(".toggle dl dd").hide(); $(".toggle dl dt").click(function(){ $(".toggle dl dd").not($(this).next()).hide(); $(".toggle dl dt").not($(this).next()).removeClass("current"); $(this).next().slideToggle(500); $(this).toggleClass("current"); }); }); </script> </head> <body><div id="header"> <p><span class="date">時間：2010/8/3</span>jQuery 折疊菜單<span style="font-size:14px;padding:10px 0 0 5px;">By Sam Zhang</span> </div><div class="content"> <div class="toggle"> <dl> <dt>web 前端開發工程師（工作地點:上海、廣州）</dt> <dd> <h2>工作職責：</h2> <ul> <li>簡單分析用戶數據，整理用戶需求導向；</li> <li>對在用戶瀏覽器端的最終視覺呈現負責；</li> <li>和后臺工程師一起研討技術實現方案，制定服務接口等；</li> </ul> <h2>職位要求：</h2> <ul> <li>本科以上學歷，習慣閱讀英文原版技術文檔和書籍；</li> <li>對可用性、可訪問性等相關知識有深刻的認識和實踐經驗；</li> <li>掌握至少一門非前端腳本開發語言（如PHP/Python等）；</li> </ul> </dd> <dt>web 前端開發工程師（工作地點:上海、廣州）</dt> <dd> <h2>工作職責：</h2> <ul> <li>對在用戶瀏覽器端的最終視覺呈現負責；</li> <li>持續的優化前端體驗和頁面響應速度；</li> <li>和后臺工程師一起研討技術實現方案，制定服務接口等；</li> </ul> <h2>職位要求：</h2> <ul> <li>本科以上學歷，習慣閱讀英文原版技術文檔和書籍；</li> <li>熟悉至少一種JS框架（如YUI/JQuery等），我們目前主要使用YUI；</li> <li>掌握至少一門非前端腳本開發語言（如PHP/Python等）；</li> </ul> </dd> <dt>web 前端開發工程師（工作地點:上海、廣州）</dt> <dd> <h2>工作職責：</h2> <ul> <li>簡單分析用戶數據，整理用戶需求導向；</li> <li>對在用戶瀏覽器端的最終視覺呈現負責；</li> <li>使用HTML/CSS/Javascript開發符合W3C標準的網站前端頁面；</li> </ul> <h2>職位要求：</h2> <ul> <li>精通XHTML/CSS/Javascript等前端技術，兼容多種瀏覽器的代碼；</li> <li>熟悉至少一種JS框架（如YUI/JQuery等），我們目前主要使用YUI；</li> <li>掌握至少一門非前端腳本開發語言（如PHP/Python等）；</li> </ul> </dd> </dl> </div> </div></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
