jQuery實現(xiàn)的簡單折疊菜單(折疊面板)效果代碼
更新時間：2015年09月16日 10:01:58 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)的簡單折疊菜單(折疊面板)效果代碼,涉及jQuery中slideToggle與toggleClass方法的靈活使用技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的簡單折疊菜單(折疊面板)效果代碼。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現(xiàn)的折疊菜單，可展開一些內(nèi)容，實際上稱它為一個面板比較好，是一個折疊面板，使用了jQuery1.6.2插件。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/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 前端開發(fā)工程師（工作地點:上海、廣州）</dt>
<dd>
<h2>工作職責：</h2>
<ul>
<li>簡單分析用戶數(shù)據(jù)，整理用戶需求導向；</li>
<li>對在用戶瀏覽器端的最終視覺呈現(xiàn)負責；</li>
<li>和后臺工程師一起研討技術實現(xiàn)方案，制定服務接口等；</li>
</ul>
<h2>職位要求：</h2>
<ul>
<li>本科以上學歷，習慣閱讀英文原版技術文檔和書籍；</li>
<li>對可用性、可訪問性等相關知識有深刻的認識和實踐經(jīng)驗；</li>
<li>掌握至少一門非前端腳本開發(fā)語言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>web 前端開發(fā)工程師（工作地點:上海、廣州）</dt>
<dd>
<h2>工作職責：</h2>
<ul>
<li>對在用戶瀏覽器端的最終視覺呈現(xiàn)負責；</li>
<li>持續(xù)的優(yōu)化前端體驗和頁面響應速度；</li>
<li>和后臺工程師一起研討技術實現(xiàn)方案，制定服務接口等；</li>
</ul>
<h2>職位要求：</h2>
<ul>
<li>本科以上學歷，習慣閱讀英文原版技術文檔和書籍；</li>
<li>熟悉至少一種JS框架（如YUI/JQuery等），我們目前主要使用YUI；</li>
<li>掌握至少一門非前端腳本開發(fā)語言（如PHP/Python等）；</li>
</ul>
</dd>
<dt>web 前端開發(fā)工程師（工作地點:上海、廣州）</dt>
<dd>
<h2>工作職責：</h2>
<ul>
<li>簡單分析用戶數(shù)據(jù)，整理用戶需求導向；</li>
<li>對在用戶瀏覽器端的最終視覺呈現(xiàn)負責；</li>
<li>使用HTML/CSS/Javascript開發(fā)符合W3C標準的網(wǎng)站前端頁面；</li>
</ul>
<h2>職位要求：</h2>
<ul>
<li>精通XHTML/CSS/Javascript等前端技術，兼容多種瀏覽器的代碼；</li>
<li>熟悉至少一種JS框架（如YUI/JQuery等），我們目前主要使用YUI；</li>
<li>掌握至少一門非前端腳本開發(fā)語言（如PHP/Python等）；</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery實現(xiàn)獲取隱藏div高度的方法,結合實例形式較為詳細的分析了jQuery針對頁面元素屬性操作的相關技巧,需要的朋友可以參考下2017-02-02
本文將介紹常見的幾種使用spinner數(shù)字微調(diào)器來實現(xiàn)數(shù)字加減的功能的方法。非常的簡單實用，這里推薦給大家
2014-12-12 
利用jquery給指定的table動態(tài)添加一行、刪除一行的方法
下面小編就為大家?guī)硪黄胘query給指定的table動態(tài)添加一行、刪除一行的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10 
Javascript中的異步編程規(guī)范Promises/A詳細介紹
這篇文章主要介紹了Javascript中的異步編程規(guī)范Promises/A詳細介紹,同時介紹了jQuery 中的 Deferred 和 Promises,需要的朋友可以參考下
2014-06-06 
jQuery+css3實現(xiàn)文字跟隨鼠標的上下抖動
這篇文章主要介紹了jQuery+css3實現(xiàn)文字跟隨鼠標的上下抖動的相關資料,需要的朋友可以參考下
2015-07-07 
jQuery實現(xiàn)簡單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
自寫寫的一個jQuery插件，可以實現(xiàn)簡單網(wǎng)頁遮罩層/彈出層功能，并且兼容IE6、IE7，需要的朋友可以參考下
2014-06-06 
這里給大家分享的是使用jQuery插件實現(xiàn)兼容IE8的異步上傳文件的代碼，效果非常不錯，有需要的小伙伴可以參考下。
2015-06-06 
解決qrcode.js生成二維碼時必須定義一個空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時必須定義一個空div的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07 
這篇文章主要為大家詳細介紹了jquery.pager.js實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07