首先给你看效果图，你喜欢的朋友会继续往下看。

这是一个简单但实用的多级垂直手风琴下拉列表菜单。多级手风琴菜单完全由CSS制作，通过对不同的子菜单进行分组来制作多级菜单效果。

多级折叠菜单是使用checkbox元素上的：checked伪元素创建的。如果需要一些好看的动画效果，可以使用插件中提供的main.js文件，可以提供菜单打开收缩时左侧小箭头的动画效果。

下载效果演示源代码。

施用方式

HTML结构

多级手风琴菜单的HTML结构非常简单：整个手风琴是一个无序的列表。如果列表项包含子菜单，请添加输入[type=checkbox]和标签，并添加。列表项的-children。所有其他标准列表项都包含在一个A标记中。

ul class=' CD-accordion-menu ' Li class=' has-children '输入类型=' checkbox ' name=' Group-1 ' id=' Group-1 '选中标签为='group-1'Group 1/标签ul li class='has-children '输入类型=' checkbox ' name=' Sub Group-1 ' id=' Sub Group-1 '标签为=' Sub Group-1 ' Sub Group 1/标签ul lia href=' # 0 ' Image/a/Li a href=' # 0 ' Image/a/Li-CD-CD-手风琴-菜单- CSS风格。

多级折叠菜单只使用CSS检测点击并展开子菜单。使用的方法是通过checkbox元素，然后通过：checked伪类和相邻同级选择器，将ul元素的显示模式从“无”更改为“阻止”。

首先，确保所有带有子菜单的列表项都有复选框元素。当您单击一个标签元素时，您实际上是单击了相应的复选框元素：这是通过设置标签元素的for属性来实现的。然后，您可以简单地隐藏checkbox元素并用label元素替换它。CD-accordion-菜单输入[type=checkbox] { /*隐藏本机checkbox */position : absolute；opa city 3360 0；}.CD-手风琴式菜单标签。CD-手风琴式菜单a { position: relativedisplay:块；padding: 18px 18px 18px 64px背景技术# 4d5158box-shadow:插图0-1px # 555960；color: # fffffffont-size : 1.6 rem；} JavaScript

如果需要给这个折叠菜单添加一些不错的动画效果，可以使用jQuery和插件中提供的main.js文件。同时，有必要添加一个。在ul.cd-accordion-menu元素上制作class class class动画，这将使小箭头的方向在打开和关闭子菜单时产生动画效果。

以上内容是本文介绍的附带源代码下载的Jquery垂直多级手风琴菜单的完整描述。希望你喜欢。喜欢的朋友可以直接点击下载源代码。