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


这是一个简单但实用的多级垂直手风琴下拉菜单。多级手风琴菜单完全是CSS，这是按不同的子菜单制作多级菜单。

多级的手风琴菜单是通过使用复选框：选中元素的伪元素。如果你需要一些漂亮的动画效果，你可以使用main.js文件提供的插件，它可以提供小箭头左边的动画效果时，打开菜单，承包。
效果演示源代码下载

使用方法



HTML结构



多层次的手风琴菜单的HTML结构很简单：整个手风琴是一个无序列表。如果一个列表项包含子菜单，添加一个复选框，输入{类型= }和标签，并添加a.has-children类的列表项。所有其他标准的列表项都包含在一个标签。





1组



亚组1

图像
图像
图像


图像
图像


图像
图像



css样式

多级的手风琴菜单只使用CSS来检测点击展开子菜单。它使用的方式是通过复选框的元素，然后通过伪类选择器和相邻兄弟检查改变元素的显示模式，改变从一块。

首先要做的是确保所有列表项和子有复选框的元素。当你点击一个标签元素，实际上你点击相应的复选框的元素：这是通过设置标签的元素的属性来实现的。然后你可以简单地隐藏复选框元素和取代它的标签元素。


CD手风琴菜单{输入类型=复选框}
隐藏本机复选框
位置：绝对；
不透明性：0；
}
CD手风琴菜单标签，CD手风琴菜单{
职位：相对；
显示块；
填料：18px 18px 18px 64px；
背景：# 4d5158；
盒子的影子：插图0 1px # 555960；
颜色：# ffffff；
字体大小：1.6rem；
}


Javaｓｃｒｉｐｔ

如果你需要添加一些好的动画的手风琴菜单，你可以使用在plug-in.at同时提供jQuery和main.js文件，你需要添加。动画类的ul.cd-accordion-menu元，这使得小箭头的方向和动画打开时关闭子菜单。

以上内容是jQuery垂直手风琴菜单的完整描述，本文将介绍这一点。希望大家喜欢。喜欢的朋友可以直接点击下载源码。