垂直手風琴導航選單程式碼例項
分享一段程式碼例項,它實現了垂直展開和摺疊導航選單,也被稱作為手風琴導航選單。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { padding: 0; margin: 0; } .accordion { width: 500px; margin: 0 auto; } .accordion > h3 { background: #5DB0D7; height: 40px; line-height: 40px; cursor: pointer; border-bottom: 1px solid white; } .accordion > div { height: 100px; width: 100%; display: none; } .accordion > div > p { height: 20px; line-height: 20px; } .accordion > h3:hover, .accordion > h3.active { background: #F26621; color: white; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { var $head = $("#accordion>h3"); var $contents = $("#accordion>div"); $head.first().addClass('active').next().slideDown('normal'); $head.on('click', function (event) { event.preventDefault(); if ($(this).attr('class') != 'active') { $contents.slideUp('normal'); $(this).next().stop(true, true).slideToggle('normal'); $head.removeClass('active'); $(this).addClass('active'); } }); }) </script> </head> <body> <div id="accordion" class="accordion"> <h3>螞蟻部落一</h3> <div> <p>內容一</p> </div> <h3>螞蟻部落二</h3> <div> <p>內容二</p> </div> <h3>螞蟻部落三</h3> <div> <p>www.softwhy.com</p> </div> <h3>螞蟻部落四</h3> <div> <p>jquery教程</p> </div> </div> </body> </html>
上面的程式碼實現了我們的要求,程式碼比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).first()可以參閱jQuery first()一章節。
(2).addClass()可以參閱jQuery addClass()一章節。
(3).next()可以參閱jQuery next()一章節。
(4).slideDown()可以參閱jQuery slideDown()一章節。
(6).slideToggle()可以參閱jQuery slideToggle()一章節。
(7).removeClass()可以參閱jQuery removeClass()一章節。
相關文章
- jQuery垂直手風琴導航選單詳解jQuery
- jQuery手風琴導航選單詳解jQuery
- 垂直樹形多級導航選單程式碼例項
- 垂直可伸縮的導航選單例項程式碼單例
- jQuery手風琴風格收縮展開導航選單jQuery
- jQuery手風琴效果程式碼例項jQuery
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- 蜂巢式導航選單程式碼例項
- 手風琴方式展開和摺疊導航選單效果
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- jQuery點選展開摺疊手風琴導航選單詳解jQuery
- css簡單水平導航選單程式碼例項CSS
- javascript樹形導航選單例項程式碼JavaScript單例
- css樹形導航選單程式碼例項CSS
- 響應式導航選單程式碼例項
- 自定義右鍵導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- CSS3 扇形導航選單程式碼例項CSSS3
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- CSS垂直導航選單CSS
- 側欄能夠定位的導航選單程式碼例項
- 可以固定的頂部的導航選單簡單例項程式碼單例
- js橫向滑動摺疊導航選單程式碼例項JS
- 一款非常炫酷的CSS3垂直手風琴選單CSSS3
- CSS垂直三級導航選單CSS
- css3實現緩慢下拉手風琴導航選單效果CSSS3
- css水平下拉導航選單程式碼例項CSS
- 純CSS實現的二級導航選單效果程式碼例項CSS
- 小例項: 用vue實現手風琴效果Vue
- css3實現的立體導航選單效果程式碼例項CSSS3
- css三級下拉導航選單程式碼例項CSS
- CSS3垂直摺疊導航選單CSSS3
- 導航欄背景切換程式碼例項
- js實現的垂直選項卡效果程式碼例項JS
- 垂直摺疊導航選單實現詳解
- html 仿百度百科導航下拉選單功能例項程式碼介紹HTML
- 具有淡入淡出效果的下拉導航選單例項程式碼單例