jQuery創(chuàng)建折疊式菜單
更新時間：2019年06月15日 11:36:24 作者：hanhf
這篇文章主要為大家詳細介紹了jQuery創(chuàng)建折疊式菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天給大家介紹如何使用jQuery創(chuàng)建折疊式菜單，即通常所說的手風琴效果（accordion [əˈkɔ:rdiən]）。
實現效果如下：
一、HTML代碼結構
要實現折疊式菜單，代碼相當簡單，如下所示：
<ul class="accordion"> <li class="selected"> <span>北京景點</span> <div> <ul> <li>故宮</li> <li>十三陵</li> <li>圓明園</li> <li>長城</li> </ul> </div> </li> <li> <span>上海景點</span> <div> <ul> <li>東方明珠</li> <li>外灘</li> <li>豫園</li> <li>龍華寺</li> </ul> </div> </li> <li> <span>廣州景點</span> <div> <ul> <li>白云山</li> <li>中山紀念堂</li> <li>華南植物園</li> <li>越秀公園</li> </ul> </div> </li> <li> <span>深圳景點</span> <div> <ul> <li>世界之窗</li> <li>東門老街</li> <li>海上田園旅游區(qū)</li> <li>中信明思克航母</li> </ul> </div> </li> <li> <span>廈門景點</span> <div> <ul> <li>鼓浪嶼</li> <li>集美嘉庚園</li> <li>萬石植物園</li> <li>方特夢幻王國</li> </ul> </div> </li> </ul>
整個折疊式菜單是一個無序列表，每個菜單項是一個li。在li中，有一個span用于標題，一個div中包含了另外一個無序列表，用于子菜單。
二、jQuery代碼分析
jQuery的代碼也很簡單，只有短短的幾行：
$(function () {
$("ul.accordion li span").on('click', function () {
$(this).parent().siblings().removeClass('selected').find('div').hide();
$(this).parent().addClass('selected');
$(this).next().slideDown(500);
});
});
我們來分析一下。
首先，通過jQuery的選擇器"ul.accordion li span"指定在菜單項的標題上點擊，可以折疊菜單。
click事件處理函數的第一行代碼做了兩件事，一個是將其它菜單項的selected樣式移除，另一個是將其它菜單項的div（包括其中的子菜單）隱藏起來。$(this).parent即span的上一級，即li。.siblings()查找它的兄弟元素，并使用鏈式調用首先移除其selected樣式，再查找其中的div并隱藏。
第二行代碼為當前點擊菜單添加selected樣式。
第三行代碼展開當前菜單的子菜單。$(this).next()即span的下一個元素，即div（其中包含子菜單）。.slideDown(500)將子菜單向下緩緩展開，使用了CSS的動畫效果，500指定動畫時間為500毫秒。
三、CSS代碼分析
這個折疊菜單的HTML代碼和jQuery代碼本身都相當簡單，但CSS代碼相對較長：
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.accordion,
.accordion ul { /* 折疊菜單及其子菜單的通用樣式 */
font-size: 14px;
font-weight: bold;
width: 300px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
border: 5px solid #343b42;
}
.accordion ul {
border: 0;
}
.accordion ul li { /* 子菜單的菜單項樣式 */
line-height: 50px;
height: 50px;
color: #e6efee;
border-bottom: 1px solid #383b4c;
background-color: #282b3a;
}
.accordion li span { /* 折疊菜單的標題樣式 */
line-height: 60px;
display: block;
height: 60px;
color: #e6efee;
border: 2px solid #343b42;
background-color: #3789d3;
}
.accordion li.selected span { /* 折疊菜單選中項的標題樣式 */
color: #e6efee;
background-color: #393c4b;
}
.accordion li div { /* 子菜單平時不顯示 */
display: none;
}
.accordion li.selected div { /* 添加了selected樣式時才顯示 */
display: block;
}
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jquery自動補齊功能插件flexselect用法,結合實例形式分析了flexselect實現自動補齊功能的操作步驟與相關實現技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery實現給input綁定回車事件的方法,結合實例形式分析了2種常用的事件綁定操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了PageSwitch插件實現100種不同圖片切換效果,需要的朋友可以參考下2015-07-07
今天小編就為大家分享一篇js根據json數據中的某一個屬性來給數據分組的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了jquery實現在光標位置插入內容的方法,涉及jQuery功能的擴展技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jQuery插件Slider Revolution實現響應動畫滑動圖片切換效果
Slider Revolution插件是一款非常強大的插件了，我們可以利用它來制作出各種效果并且還支持移動設備，支持手機觸摸，鍵盤翻頁；它內置幻燈、視頻播放計時器等等效果，具體我們來看看。2015-06-06
這篇文章主要為大家詳細介紹了jquery點擊實現升序降序圖標切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
對于學習使用jquery 的朋友，能用的到，簡單的了解下jquery的一些操作。2009-02-02
這篇文章主要介紹了jQuery實現dialog設置focus焦點的方法,涉及jQuery針對dialog的操作技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了基于jquery實現左右無縫輪播圖的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05