首先給大家展示下效果圖，喜歡的朋友繼續往下看哦。
這是一款簡單但實用的多級垂直手風琴下拉列表菜單。該多級手風琴菜單完全使用CSS來制作，它通過將不同的子菜單進行分組，制作出多級菜單的效果。
該多級手風琴菜單通過在checkbox元素上使用:checked偽元素來制作。如果需要一些好看的動畫效果，可以實用插件中提供的main.js文件，它可以提供菜單打開和收縮時左側小箭頭的動畫效果。
使用方法
HTML結構
該多級手風琴菜單的HTML結構非常簡單：整個手風琴是一個無序列表。如果某個列表項中包含有子菜單，則添加一個input[type=checkbox]和一個label標簽，同時為該列表項添加一個.has-children的class類。所有其它標準的列表項都包含在一個a標簽中。
<ul class="cd-accordion-menu"> <li class="has-children"> <input type="checkbox" name ="group-1" id="group-1" checked> <label for="group-1">Group 1</label> <ul> <li class="has-children"> <input type="checkbox" name ="sub-group-1" id="sub-group-1"> <label for="sub-group-1">Sub Group 1</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li></ul> <!-- cd-accordion-menu -->
CSS樣式
該多級手風琴菜單僅使用CSS來檢測點擊和展開子菜單。它使用的方法是通過checkbox元素，然后通過:checked偽類和相鄰的兄弟選擇器來改變<ul>元素的顯示模式，從“none”改變為“block”。
首先需要確保所有有子菜單的列表項都帶有checkbox元素。當你點擊在一個label元素上的時候，實際是點擊了相應的checkbox元素：這通過設置label元素的for屬性來實現。接著就可以簡單的隱藏checkbox元素，通過label元素來取代它。
.cd-accordion-menu input[type=checkbox] { /* hide native checkbox */ position: absolute; opacity: 0;}.cd-accordion-menu label, .cd-accordion-menu a { position: relative; display: block; padding: 18px 18px 18px 64px; background: #4d5158; box-shadow: inset 0 -1px #555960; color: #ffffff; font-size: 1.6rem;} JavaScript
如果你需要為這個手風琴菜單添加一些好看的動畫效果，可以使用jQuery和插件中提供的main.js文件。同時需要在ul.cd-accordion-menu元素上添加.animate class類，它會使小箭頭的方向在打開和關閉子菜單時產生動畫效果。
以上內容就是本文給大家介紹的Jquery 垂直多級手風琴菜單附源碼下載的全部敘述，希望大家喜歡。喜歡的朋友可以直接點擊下載源碼哦。
新聞熱點
疑難解答
