jQuery手風琴導航選單詳解
本章節分享一個程式碼例項,它實現了簡單的手風琴導航選單效果。
下面詳細介紹一下它的實現過程,需要的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .nav ul { display: none; } .nav ul li { width: 100px; text-align: center; cursor: pointer; } .nav div { background: #4ecc70; width: 100px; border-radius: 10px; line-height: 34px; text-align: center; color: white; cursor: pointer; } .red { background: red; border-radius: 10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var changeType = $('.nav').find('div'); $.each(changeType, function () { $(this).on('click', function () { if (false == $(this).next().is(':visible')) { $('.nav ul').slideUp(300); } $(this).next().slideToggle(300); }) $('.nav ul:eq(0)').show(); }) var hoverType = $('.nav .u').find('li') $.each(hoverType, function () { $(this).hover(function () { $(this).addClass('red').siblings().removeClass('red'); }) }) }) </script> </head> <body> <ul class="nav"> <li> <div>前端</div> <ul class="u"> <li>div教程</li> <li>css教程</li> <li>html教程</li> <li>js教程</li> </ul> </li> <li> <div>資源</div> <ul class="u"> <li>特效</li> <li>模板</li> <li>程式碼</li> <li>書籍</li> </ul> </li> <li> <div>討論</div> <ul class="u"> <li>交流</li> <li>分享</li> <li>互助</li> <li>問答</li> </ul> </li> </ul> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(function () {}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).var changeType = $('.nav').find('div'),獲取class屬性值為nav元素下的div元素集合。
(3).$.each(changeType, function () {}),遍歷changeType集合中的每一個div元素。
(4).$(this).on('click', function () {}),為當前的div元素註冊click事件處理函式。
(5).if (false == $(this).next().is(':visible')) {
$('.nav ul').slideUp(300);
}
如果當前div元素的下一個元素,也就是ul元素不是顯示狀態.
那麼首先首先將所有的ul元素收起(這個保證了只有一個ul元素是展開狀態)。
(6).$(this).next().slideToggle(300),展開和關閉的切換。
(7).$('.nav ul:eq(0)').show(),設定第一個ul元素預設是展開的。
(8).var hoverType = $('.nav .u').find('li'),獲取ul元素下所有的li元素。
(9).$.each(hoverType, function () {
$(this).hover(function () {
$(this).addClass('red').siblings().removeClass('red');
})
}),為每一個li元素註冊hover事件處理函式,設定當滑鼠懸浮時,背景色變紅,移開時恢復。
二.相關閱讀:
(1).find()可以參閱jQuery find()一章節。
(2).$.each()可以參閱jQuery.each()一章節。
(3).on()可以參閱jquery on()一章節。
(4).next()可以參閱jQuery next()一章節。
(5).is()可以參閱jQuery is()一章節。
(6).slideUp()可以參閱jQuery slideUp()一章節。
(7).slideToggle()可以參閱jQuery slideToggle()一章節。
(8).:eq()可以參閱jQuery :eq()一章節。
(9).:visible可以參閱jQuery :visible一章節。
(10).hover()可以參閱jQuery hover事件一章節。
(11).addClass()可以參閱jQuery addClass()一章節。
(12).siblings()可以參閱jQuery siblings()一章節。
相關文章
- jQuery手風琴風格收縮展開導航選單jQuery
- jQuery三級導航選單詳解jQuery
- jQuery和css3垂直手風琴摺疊選單外掛jQueryCSSS3
- 導航選單(動畫)--- jQuery動畫jQuery
- CSS三級下拉導航選單詳解CSS
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- 手風琴方式圖片展示效果詳解
- jQuery 淡入淡出效果下拉導航選單jQuery
- 垂直摺疊導航選單實現詳解
- 二級下拉導航選單製作詳解
- jQuery 緩衝效果二級導航下拉選單jQuery
- PbootCMS導航選單-導航選單的使用教程boot
- 中英文切換導航選單實現詳解
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- jQuery 動畫方式展開或者收縮垂直導航選單jQuery動畫
- H5C3寫一個酷炫的手風琴選單H5
- JavaScript下拉摺疊導航選單講解JavaScript
- CSS垂直導航選單CSS
- CSS jquery圓角帶陰影的導航選單程式碼分享CSSjQuery
- jquery-滑鼠經過導航條,顯示二級下拉選單jQuery
- JavaScript二級導航選單JavaScript
- CSS 動態導航選單CSS
- JavaScript 三級導航選單JavaScript
- jQuery和css3全屏彈出式導航選單特效外掛jQueryCSSS3特效
- Flutter 底部導航詳解Flutter
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- Element-ui之導航選單UI
- JavaScript slide下拉導航選單效果JavaScriptIDE
- 使用React手寫一個手風琴元件React元件
- 純css製作導航下拉選單CSS
- (四)選單導航及路由設定路由
- 固定在頂部的導航選單
- vue元件之路之menu導航選單Vue元件
- JavaScript橫向二級導航選單效果JavaScript
- CSS3麵包屑導航選單CSSS3
- JavaScript可摺疊屬性導航選單JavaScript