废话不多说，先预览https://codepen.io/Ritr/pen/W...这次，我们还是用的选择来实现扩展，收起二级菜单。第一步：初始化默认二级菜单的li高度为0，选中一级菜单时，设置二级菜单的高度为20px。这个设置是为了方便以后添加动画效果。html水果橙色香蕉Applefruit橙色香蕉苹果css/*初始化*/*{margin:0;填充：0}.container{宽度：500像素；保证金：0自动；text-align:center;}.menu{width:200px;显示：内联块；}li{列表样式：无；光标：指针；5px;}.main-menu{背景：#0099CC;margin:1px0;}.sub-menu{背景:#00CCFF;边距：1px0；溢出：隐藏；height:0;}.sub-menu.checked{height:20px;}第二步效果图：选中checkbox时展开二级菜单，取消checkbox时展开二级菜单levelmenu会折叠到focus——注意label和input之间的位置html水果橙色香蕉苹果水果橙色香蕉Applecss/*第二步*/.ck:checked+.sub-menu-container.sub-menu{height:20px;}效果图看起来和第一步一样。第三步是优化。将label设置为与一级菜单一样大小，隐藏checkbox，并添加动画html水果橙色香蕉苹果css.menu-label{display:inline-block;宽度：100%；cursor:pointer;}/*隐藏复选框*/.ck-finished{display:none;}.ck-finished:checked+.sub-menu-container.sub-menu-finished{height:20px;}.sub-menu-finished{background:#00CCFF;边距：1px0;溢出：隐藏；高度：0；transition:all0.4s;/*添加动画*/}效果图哈哈，变化不大，还是要点击预览。另外，上次那个gif是怎么回事？大哥告诉我。
