jQuery手風琴風格收縮展開導航選單
本章節分享一段程式碼例項,它實現了手風琴效果,可以伸縮的下拉導航選單。
掌握選單的實現原理才是最重要的,下面就詳細分析一下它的實現過程。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> /*globle*/ ul, li{ margin: 0; padding: 0; list-style-type: none; } a{ display: inline-block; width: 100%; height: 31px; text-decoration: none; color: #fff; font-size: 13px; } a:hover{ background: #52718A; } /*sidebar*/ .sidebar{ width: 210px; height: 335px; margin: 50px auto; border-radius: 5px; font: 14px '新宋體'; color: #f4f4f4; } .title{ width: 95%; line-height: 32px; border-bottom: 1px solid #ccc; background: #1ABC9C; cursor: pointer; } .title > span{ margin-left: 10px; } /*in-sidebar*/ .in-sidebar{ width: 100%; display: none; } .in-sidebar > li{ width: 100%; height: 32px; background: #34495E; line-height: 32px; text-align: center; border-bottom: 1px solid #ddd; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp(); $(this).children('ul').slideToggle(); tmp = this; }); $con.click(function(){ return false; // 阻止事件冒泡 }); }); </script> </head> <body> <div class="sidebar"> <ul> <li class="title"> <span>一、HTML5基礎教程</span> <ul class="in-sidebar"> <li><a target="_blank" href="http://www.softwhy.com">HTML5基礎教程1</a></li> <li><a href="#">HTML5基礎教程2</a></li> <li><a href="#">HTML5基礎教程3</a></li> <li><a href="#">HTML5基礎教程4</a></li> <li><a href="#">HTML5基礎教程5</a></li> </ul> </li> <li class="title"><span>二、CSS3基礎教程</span> <ul class="in-sidebar"> <li><a href="#">CSS3基礎教程1</a></li> <li><a href="#">CSS3基礎教程2</a></li> <li><a href="#">CSS3基礎教程3</a></li> <li><a href="#">CSS3基礎教程4</a></li> <li><a href="#">CSS3基礎教程5</a></li> </ul> </li> <li class="title"> <span>三、Javascript基礎教程</span> <ul class="in-sidebar"> <li><a href="#">Javascript基礎教程1</a></li> <li><a href="#">Javascript基礎教程2</a></li> <li><a href="#">Javascript基礎教程3</a></li> <li><a href="#">Javascript基礎教程4</a></li> <li><a href="#">Javascript基礎教程5</a></li> </ul> </li> <li class="title"><span>四、NodeJs基礎教程</span> <ul class="in-sidebar"> <li><a href="#">NodeJs基礎教程1</a></li> <li><a href="#">NodeJs基礎教程2</a></li> <li><a href="#">NodeJs基礎教程3</a></li> <li><a href="#">NodeJs基礎教程4</a></li> <li><a href="#">NodeJs基礎教程5</a></li> </ul> </li> <li class="title"><span>五、IOS基礎教程</span> <ul class="in-sidebar"> <li><a href="#">IOS基礎教程1</a></li> <li><a href="#">IOS基礎教程2</a></li> <li><a href="#">IOS基礎教程3</a></li> <li><a href="#">IOS基礎教程4</a></li> <li><a href="#">IOS基礎教程5</a></li> </ul> </li> </ul> </div> </body> </html>
上面的程式碼實現了手風琴下拉選單效果,下面詳細介紹一下它的實現過程。
一.程式碼註釋:
(1).$(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).var tmp = null,宣告一個變數並賦初值為null,它用來儲存當前點選的標題元素(class屬性值為title)的this索引。
(3).$title = $('.title'),獲取class屬性值為title的元素,也可以叫做標題元素,其實就是每一個選單的父元素。
(4).$con = $('.title > ul'),獲取下面的ul元素。
(5).$title.click(function(){
$(tmp).children('ul').slideUp();
$(this).children('ul').slideToggle();
tmp = this;
}),為標題元素註冊click事件處理函式。
$(tmp).children('ul').slideUp(),會把上一個點選展開的選單隱藏。
$(this).children('ul').slideToggle(),如果選單展開則隱藏,如果隱藏則展開。
tmp = this,將當前的this物件引用賦值給tmp。
(6).$con.click(function(){
return false; // 阻止事件冒泡
}),阻止時間冒泡,否則點選連結也會產生選單展開和隱藏效果。
二.相關閱讀:
(1).children方法參閱jQuery children()一章節。
(2).slideUp方法參閱jQuery slideUp()一章節。
(3).slideToggle方法參閱jQuery slideToggle()一章節。
(4).return false參閱javascript return false一章節。
相關文章
- jQuery手風琴導航選單詳解jQuery
- jQuery點選展開摺疊手風琴導航選單詳解jQuery
- jQuery垂直手風琴導航選單詳解jQuery
- 手風琴方式展開和摺疊導航選單效果
- 垂直手風琴導航選單程式碼例項
- jQuery 動畫方式展開或者收縮垂直導航選單jQuery動畫
- css3滑鼠懸浮展開收縮導航選單CSSS3
- jQuery-demos網格手風琴練習jQuery
- css3實現緩慢下拉手風琴導航選單效果CSSS3
- jQuery手風琴圖片切換jQuery
- jQuery手風琴效果程式碼例項jQuery
- 炫酷的jQuery手風琴圖片和選單外掛及原始碼jQuery原始碼
- 導航選單(動畫)--- jQuery動畫jQuery
- H5C3寫一個酷炫的手風琴選單H5
- 一款非常炫酷的CSS3垂直手風琴選單CSSS3
- jQuery實現的點選展開其他專案摺疊導航選單jQuery
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- jQuery滑動導航選單jQuery
- elementui NavMenu導航選單預設展開UI
- 目標偽類選擇器實現手風琴效果
- 使用React手寫一個手風琴元件React元件
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- jQuery三級導航選單詳解jQuery
- jQuery底部跟隨水平導航選單jQuery
- 手風琴方式圖片展示效果詳解
- vue實現側邊欄手風琴效果Vue
- js垂直右側展開導航選單詳解JS
- CSS 可伸縮圓角導航選單CSS
- jQuery css3環形導航選單jQueryCSSS3
- 小例項: 用vue實現手風琴效果Vue
- 點選平滑下拉展開摺疊樹形導航選單
- jQuery 緩衝效果二級導航下拉選單jQuery
- jQuery背景滑動跟隨的導航選單jQuery
- 點選標題下拉展開二級子標題導航選單
- element-ui table表格元件實現手風琴效果UI元件
- 純CSS3手風琴圖片滑動特效CSSS3特效
- js頂部可以伸縮的導航選單效果JS
- 水平伸縮動畫導航選單實現詳解動畫