jQuery垂直可摺疊展開導航選單程式碼例項詳解
本章節分享一段程式碼例項,它實現了垂直可展開和摺疊的導航選單效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } .menu_list { width: 268px; margin: 0 auto; } .menu_head { height: 47px; line-height: 47px; padding-left: 38px; font-size: 14px; color: #525252; cursor: pointer; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; border-top: 1px solid #F1F1F1; position: relative; margin: 0px; font-weight: bold; background: #f1f1f1 url(demo/jQuery/img/jia.png) center right no-repeat; } .menu_list .current { background: #f1f1f1 url(demo/jQuery/img/jian.png) center right no-repeat; } .menu_body { line-height: 38px; border-left: 1px solid #e1e1e1; background: #fff; border-right: 1px solid #e1e1e1; } .menu_body a { display: block; height: 38px; line-height: 38px; padding-left: 38px; color: #777777; background: #fff; text-decoration: none; border-bottom: 1px solid #e1e1e1; } .menu_body a:hover { text-decoration: none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function () { $("#firstpane h3.menu_head").click(function () { $(this).addClass("current") .next("div.menu_body") .slideToggle(300) .siblings("div.menu_body") .slideUp("slow"); $(this).siblings().removeClass("current"); }); }); </script> </head> <body> <div id="firstpane" class="menu_list"> <h3 class="menu_head">螞蟻部落</h3> <div style="display:none" class="menu_body"> <a href="#">div教程</a> <a href="#">css教程</a> <a href="#">js教程</a> <a href="#">css3教程</a> <a href="#">json教程</a> <a href="#">ajax教程</a> <a href="#">es6教程</a> <a href="#">jquery教程</a> </div> <h3 class="menu_head">資源下載</h3> <div style="display:none" class="menu_body"> <a href="#">特效下載</a> <a href="#">移動端下載</a> <a href="#">模板下載</a> <a href="#">原始碼下載</a> <a href="#">圖片下載</a> </div> <h3 class="menu_head">前端網站</h3> <div style="display:none" class="menu_body"> <a href="#">螞蟻部落</a> <a href="#">softwhy.com</a> <a href="#">前端專區</a> <a href="#">資源專區</a> </div> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼.menu_list { width: 268px; margin: 0 auto; }
定義選單容器的css程式碼,將選單設定於網頁水平居中位置。
[CSS] 純文字檢視 複製程式碼.menu_head { height: 47px; line-height: 47px; padding-left: 38px; font-size: 14px; color: #525252; cursor: pointer; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; border-top: 1px solid #F1F1F1; position: relative; margin: 0px; font-weight: bold; background: #f1f1f1 url(demo/jQuery/img/jia.png) center right no-repeat; }
設定選單的標題樣式,右側預設是一個加號圖示。
[HTML] 純文字檢視 複製程式碼<div style="display:none" class="menu_body">
預設情況下二級導航選單是處於隱藏狀態的。
[JavaScript] 純文字檢視 複製程式碼$(document).ready(function () {})
規定當文件結構完全載入完畢再去執行函式中的程式碼。
[JavaScript] 純文字檢視 複製程式碼$("#firstpane h3.menu_head").click(function () {})
為標題註冊click事件處理函式。
[JavaScript] 純文字檢視 複製程式碼$(this).addClass("current") .next("div.menu_body") .slideToggle(300) .siblings("div.menu_body") .slideUp("slow");
上面的程式碼是一個鏈式呼叫。
當滑鼠點選標題之後,就會為當前標題元素新增current樣式類,這樣右側就會出現減號圖示。
標題的下一個二級選單就會展開。
其實的兄弟選單就會收縮。
[JavaScript] 純文字檢視 複製程式碼$(this).siblings().removeClass("current");
刪除其他兄弟元素的current樣式類。
二.相關閱讀:
(1).addClass()可以參閱jQuery addClass()一章節。
(2).next()可以參閱jQuery next()一章節。
(3).slideToggle()可以參閱jQuery slideToggle()一章節。
(4).slideUp()可以參閱jQuery slideUp()一章節。
(5).removeClass()可以參閱jQuery removeClass()一章節。
相關文章
- 垂直摺疊導航選單實現詳解
- jQuery點選展開摺疊手風琴導航選單詳解jQuery
- js橫向滑動摺疊導航選單程式碼例項JS
- 垂直可伸縮的導航選單例項程式碼單例
- CSS3垂直摺疊導航選單CSSS3
- jQuery實現的點選展開其他專案摺疊導航選單jQuery
- JavaScript可摺疊屬性導航選單JavaScript
- 垂直手風琴導航選單程式碼例項
- js垂直右側展開導航選單詳解JS
- jQuery垂直手風琴導航選單詳解jQuery
- 垂直樹形多級導航選單程式碼例項
- 點選平滑下拉展開摺疊樹形導航選單
- JavaScript下拉摺疊導航選單講解JavaScript
- 手風琴方式展開和摺疊導航選單效果
- jQuery 動畫方式展開或者收縮垂直導航選單jQuery動畫
- jquery 實現的摺疊展開的選單jQuery
- 蜂巢式導航選單程式碼例項
- css簡單水平導航選單程式碼例項CSS
- javascript樹形導航選單例項程式碼JavaScript單例
- css樹形導航選單程式碼例項CSS
- 響應式導航選單程式碼例項
- jQuery三級導航選單詳解jQuery
- 自定義右鍵導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- CSS3 扇形導航選單程式碼例項CSSS3
- jQuery手風琴導航選單詳解jQuery
- jQuery點選展開收起程式碼例項jQuery
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- CSS垂直導航選單CSS
- js和css實現的扇子展開和摺疊效果程式碼例項JSCSS
- 側欄能夠定位的導航選單程式碼例項
- vscode摺疊展開程式碼VSCode
- 微信小程式實現多摺疊展開酷炫選單微信小程式
- BootStrap | 例項 - 摺疊boot
- 可以固定的頂部的導航選單簡單例項程式碼單例
- 直播平臺原始碼,可摺疊式選單欄原始碼