HTML部分(含JS)
CSS部分（选择器部分和阿里图标库部分）
如下所示的简易手风琴菜单
HTML部分
我是在JSP页面上写的
注：页面里的JavaScript的代码是我直接找的别人的，我并没有学过JS所以也不懂，不过我很认真的加了注释
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testnocss.css">
<link rel="stylesheet" href="iconfont.css">
<!--testnocss.css是选择器部分，iconfont.css是阿里的图标库-->
<!--jsp部分和css部分在同一个目录下，所以就没写路径-->
</head>
<body>
<div class="h_menu">
<ul class="navigation">
<li class="list"><a href="#">Home</a></li>
<li class="list"><a href="#">Classify</a>
<ul class="classify">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<!-- Item1和Item2整体是一个ul块，属于classify类 -->
</ul>
</li>
</ul>
</div>
<script>
var list = document.querySelectorAll('.list'); //获取文档中 class=".list" 的所有元素:
function accordion(e) {
e.stopPropagation(); //该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
if (this.classList.contains('active')) { //contains判断包含关系，返回true或false
this.classList.remove('active'); //remove() 方法用于从下拉列表删除选项。
} else //classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
if (this.parentElement.parentElement.classList.contains('active')) {
// parentElement 属性，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。
this.classList.add('active'); //add() 方法用于向 <select> 添加一个 <option> 元素。所以要有两个参数？但是好像在classList后面就只需要一个参数
} else
{
for (i = 0; i < list.length; i++) {
list[i].classList.remove('active');
}
this.classList.add('active');
}
}
for (i = 0; i < list.length; i++) {
list[i].addEventListener('click', accordion); //addEventListener() 方法用于向指定元素添加事件句柄。
}
</script>
</body>
</html>
CSS选择器的部分
@charset "UTF-8";
.h_menu .navigation{ /*1 第一级ul的块的选择器*/
position:fixed;
left:5px;
top:-10px;
padding:0; /*块的大小是通过padding设置边距间接控制的，如果不是0的话，分割线的两端会留有空白*/
list-style:none;
background:#e1ebff;
width:200px;
box-shadow: 0px 0px 2px blue; /*右移和下移程度和辉光超出边界的长度，相当于发光吧*/
}
.classify li>a{ /*2 仅选择类名为classify的ul下的第二级的li的链接a的选择器*/
color:blue;
font-size:16px;
text-decoration: none; /*取消链接的下划线*/
padding:0px 150px 0px 20px; /*二级菜单的字到各边的距离*/
/*border-bottom: 1px solid #8080ff; 一级各菜单之间的分割线颜色，这种是给字设置的，所以只要字下面有一截*/
width:100%;
}
.classify li{ /*3 选择类名为classify的ul下的第二级li的块的选择器*/
border-bottom: 1px solid #8080ff; /*二级各菜单之间的分割线颜色*/
}
.h_menu .navigation .list > a{ /*4 仅选择第一级li的链接a的选择器*/
font-size:16px;
color:#00c8ff; /*一级菜单的字的颜色设置为红色*/
padding:5px 50px; /*一级菜单的字到各边的距离*/
display:block; /*padding和display:block一起用才能设置高度*/
text-decoration: none; /*取消链接的下划线*/
}
.list{ /*5 选择第一级li的块的选择器*/
position:relative;
font-size: 20px; /*设置list内的字体大小,但是优先级低于用a选择器直接设置的字体大小*/
border-bottom: 1px solid #8080ff; /*一级各菜单之间的分割线颜色,这种是给块设置的，所以整块都有*/
}
.list .classify{ /*6 选择第一级li下的第二级u类名为classify的块的选择器*/
list-style:none;
background:#e1ebff;
height:0px; /*设置其子列表的块高度为0，隐藏块，但隐藏不了文字*/
overflow:hidden; /*使溢出的文字隐藏，如果没有height:0则隐藏不了*/
padding:0; /*这里要设置padding:0不然弹出的边框会有空白*/
}
/*控制列表项的是列表内容的上一级，如控制li的标志的是上一级的ul(或ul的类)的选择器*/
/*但控制排列方式float:left的是列表如li,是li(或li的类)的选择器*/
/*类选择器貌似只能选两代*/
.navigation .active > .classify { /*7 仅选择第二级ul中类名为classify的选择器*/
height:auto; /*必须要设置高度，可以不是auto而是具体数值，不设置高度的话，就是之前的选择器为了隐藏设置的0*/
}
/*以上是基本布局*/
/*下面是图标布局*/
.classify li:before{ /*8 选择classify的前图标的选择器*/
content:'\e64f';
font-family: iconfont;
position:absolute;
left:13px;
top:6px;
}
.classify li:after{ /*9 选择classify的后图标的选择器*/
content: "\e658"; /*前图标，从iconfont类中引用的图标，\f107是标号，在jsp文件中要添加icofont.css的link*/
font-family: iconfont;
position: absolute; /*这里要设置absolute不然图标会乱跑*/
right: 17px; /*图标到（块的？）右边的距离*/
top: 6px;
color: black;
}
/*这种选择器貌似只能传两代*/
/*不知道为什么这个选择器要更深一层才能表示出列表项？？*/
ul.navigation .active>.classify li:after{
content: '\e6a1'; /*10 设置菜单的展开箭头*/
font-family: iconfont; /*设置字体*/
position: absolute;
right: 13px;
top: 6px;
padding: 0px 5px;
color: black;
}
/*设置鼠标滑过时的样式*/
.list:hover{ /*11 滑过一级菜单时块的颜色变化*/
background:#c8c8ff;
transition:1000ms; /*transition有四个属性，这里我只用了设置过渡时间的duration属性*/
}
.navigation .list>a:hover{ /*12 滑过一级菜单的链接时字体的颜色变化*/
color:blue;
transition:1000ms;
}
.classify li:hover{ /*13 滑过二级菜单时块的颜色变化*/
background:#ffd7e1;
transition:1000ms;
}
.classify li a:hover{ /*14 滑过二级菜单时字体的颜色变化*/
color:#ff0000;
transition:1000ms;
}
其实只要有上面两部分就足以完成手风琴菜单了，不过没有引入图标库的话就不会显示图标。
注：我在ecplise上运行也不显示图标，不过把链接贴到浏览器上运行就可以显示
引入图标库部分
引入图标库的部分有很多种，我只会从阿里图标库引用（需要阿里域账号或，新浪微博账号或者Github账号），感兴趣的可以自行去查一下。
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1596568858171'); /* IE9 */
src: url('iconfont.eot?t=1596568858171#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAgMAAsAAAAAD1wAAAe9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEfgqOfItgATYCJAM8CyAABCAFhG0HgUAb2AwRFazdIftZYMfkiZZFjhXPOvPmrX9TzkE+PG7m+wntQbBKEmoiOXXkvL3quQ82h82BunAucwEy0xydW+Gf2Nz7jLUSDeLQZimezdpoXXl4u73r37IgyqgtyBNJ2gJLDsMAAw88bAkl+X5zDtioCFMa0PObR1/413Lu5dLR1Fqrp9MZQtFFt30oS21vagkRjwxJE5GQfnGPJulpZDxEQqTUjoJ4Lu2FcgAvngwEYCzIABlnLdBDzsLkBHXWjc3rIQ8YWBkFhKd2EnbM0AE/XvUA9SqAR6z3Jz/yiBxQ7ADbcEnTzAYIUqHvCm2eNFujCQibswFY4AANZACQLVR3ovZJQKFdIS1oKnMDCENA5Fe/QqlKEqTF0gqpRmqQOqR+n8t3wndlcpJkeh3S1xM2mRg4HUFH/QMPkLE5XB5fICQGUySWgNSAQkXZy3LN2RdKCDJIVRD8IAkQ/CEthjAF0goIckjrICgg1UBgIDXw4ETqAAQCqQ8CBakfAg2fC4IKvhMQ1PBdMUADWts4CkA0QPVQPWD3OGh6HmQGVzie2kB2EynjuAgVK2WC5QpZfvmvXaTyl3FhsfFsYDOlJC06pYODMoy1JXYnzztbdM0tXKPDwbJ2O19FmUcZlXWcNykJc1jXYuGbnFa2wW7mOIdN19yoFPW2KJZkZY0Zf/NwgHUUsjKmVBOVn1amsrL6SpPa5iJ+lvEGS/uwdbAVbWM2V525bcg20kHax62jWzf4wwzCubIZylij8asuakim3R2KZg5DkxjkZFWVnmYoY0VjzbAWMmiJZoX1Iuqbqg2mysNmt97u1BFL2sgLySO3RGKZds7oTBhMSHjeOsPJO70J7twnYfbceClxKHE0ws4OMtarYe1Xed5qdzimKB2T19t25YJNpzOY7bzXSyymc+J80WZ4yZPr2X/+ycjQJK8xLaS1L3WsiHcy9q7CORMZq51ru5GYmHB5hoNnHVcSXxLnXxOzOwbCT66sRXit7KBTX00HcbL2QTYhyTnMO61Gj8fgduu9XqMobq8yGasbt2mRbAmE2TZqTWv5UKJosnkqb4lTrS+WJNitfNLVl5n8NrPHcAkeQRSJ17tbjBe9Rqs7B25h9MWChPNvRlB9npnqF8R8U4+3bJhpGjoR0au3j3FKG+feb4i+012gGh4ntMWlTH5BzH7H1HOtpn7Elrh+6Ayo0z1D87w3jracWzgI6nAJlqQ6J8tcrmg9oXh0/FHFifsrv78e8/n25WdmdBZETF8d5HBI63RVge9SnppuTtTma//Wxmv+YGvNtcj/9O1r+eqC4qIC9Yyiohnq6a7p0EbHsPh0Fd5Tia6oOIsfr5sxLqXRDBszQ4UnDTStRsBOMQLwJKDZe3o+cjiDE366tlp9cUvYlotqeixlrCrYVyvqkCig8ReeUMg/kiueEHDHLUGoFczlJdQroACKy7kiB8xz5nzkm/hF+IVkf1RUiDvuEJj+VjWGqXFimHyb5/LyVq8GFcT8+PjEvRk/f6c4XDrx9snuWwtDFuTO/tQQKvz2zZWeNdt2r7v0/MS0UFnI1Blvzc7VzV/0sFN8u8F44S0qgJ0j9unO9KnvLm7Oz33ukbVrmspakp96GsuZ736+N2Pc9/ih8qa3ly7NbCr/VUgzbenb/rxG5ayI2UEIrFXNnrVvSdelAkPm2RwSbF69pfW2jtMsY5fm7DelXYlR/4Qgz6xHD6srZ1bPD733Exmz9dv7PwlK8HumeZfr/tt+uKdxuwqVe+RTP4+f98sN2b//ym5wruYpiedH6sZXRhh/hePuiB7zxqnPKI9Qj7jIfc1Xv7p8h6XCQrm2tNnPDWcfoTJmxdx5p7zAzai5kVEtfEtU5NyodWTbPdi23PXq8f172b2Ka9uWYxt93K23Q7Y9xghlawWqVCiV0+yax1d/FLNk58wpVWTqVNL1Y+PsLfof/k/Wv5XEgnpPNoxFP5jN/fiBYtdsviH2gn/NyHmyc8lHuip1kHpJgDHtq2zdRkcWOlKKP12YtZD67rBEbmrCGiAEAEs2RVqeqQnfxH/PC3K5TeE1JZ8uX447/gcL0At13jrBROUCAHVRTwKTE3QvnTVkAR884DpKB0y66SdpwWCe5AE3UC3A5G+mi1YaxR66h05PfU076dA/mZXIN73mrtFW/CZX/vBM+2CxN5QGJp+UoZmknIHCwr8UYcEBsr2YybSHcYEUNFSq9YV/jAIYPgH8mXiC8HF3Kq6w8F9MVXuA4poBzbOSMnYHfkIH8Od5AcaG2bsrldgFmrICIA33GEAynAKGxA+YMrxGWuxHwNbgO+DICA0CHxJ8wJAyiWxcTRfEioySH5Upd0aYdWXXvSHvm1j8YqvoBXFlmCI/DKev6CBNbOLe+VrVkBFu6WKcDk3DZIUrpOoXqvYcBCZpUz/ldrDCdAJiqqtmCIkfZynFOmZqtYq8/Q3keo2YZHS543wB4ZSLJ0TwERYgr4quUJdDaey85dZQYjNIthasRbgQGzQ8wQg2ebkKpJSPokLMOiMgQ5miCr97VXu7zwNgwJ5BSwyZsmTLkStPvgKFihQrUarMZAO3mO21n1iyyTZ8dXl5gp7CXVKBMyCaI2tkg2yRHbLPfZiuL79lN28o4+4vms52F9z/MBgAAAA=') format('woff2'),
url('iconfont.woff?t=1596568858171') format('woff'),
url('iconfont.ttf?t=1596568858171') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1596568858171#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e69b";
}
.icon-message:before {
content: "\e635";
}
.icon-link:before {
content: "\e63e";
}
.icon-download:before {
content: "\e640";
}
.icon-list:before {
content: "\e64f";
}
.icon-arrow_down:before {
content: "\e658";
}
.icon-social_github:before {
content: "\e65e";
}
.icon-social_twitter:before {
content: "\e65f";
}
.icon-go-to-link:before {
content: "\e664";
}
.icon-aixin:before {
content: "\e8ab";
}
.icon-dianzan:before {
content: "\e8ad";
}
.icon-shouye:before {
content: "\e8b9";
}
.icon-upward:before {
content: "\e6a1";
}
.icon-next:before {
content: "\e6a2";
}
这个图标库的代码数量取决于下载了多少图标，我下载了14个，就可以看到这里有14个选择器。不过示例的手风琴菜单中只用到了三个图标。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
