前提：很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用jquery操作dom来制作吗？那你就out了！
方案：使用checkbox 的 checked 属性、巧妙地制作导航栏
结果：
我们主要制作成这样这样的的导航栏：
首先、我们写出相对的html 由于时间问题、svg没有处理到类中、所以这里给出svg的空标签、大家如果想看效果、可以到我的git里面fork一份
<div class="nav-child">
<input type="checkbox" id="nav01"/>
<label for="nav01">
<svg>图标</svg>
交通出行
<span class="choice-box">
<svg>图标</svg>
</span>
</label>
<div class="nav-item">
<ul>
<li>动车</li>
<li>违章</li>
<li>机票</li>
</ul>
</div>
</div>
接下来我选用 less
.nav-child{
input[type='checkbox']:checked{
+label{
.choice-box{
svg{
transform: rotate(-90deg);
transition: all 0.3s;
}
}
}
~.nav-item{
display: none;
}
}
}
编译之后生成css 就大功告成啦！！！
说明：
css3选择器：
+ 代表选择元素紧邻的元素
~ 代表选择元素同级的元素
转载请注明出处 http://www.cnblogs.com/Miss-mickey/