前提：很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用jquery操作dom来制作吗？那你就out了！

方案：使用checkbox 的 checked 属性、巧妙地制作导航栏

结果：

我们主要制作成这样这样的的导航栏：

首先、我们写出相对的html  由于时间问题、svg没有处理到类中、所以这里给出svg的空标签、大家如果想看效果、可以到我的一份

<label for="nav01">
            交通出行              
　　　　　　　　　　　　 
动车
违章
机票

接下来我选用 less

.nav-child{
      input[type='checkbox']:checked{+label{
          .choice-box{
            svg{
              transform: rotate(-90deg);
              transition: all 0.3s;
            }
          }
        }~.nav-item{
          display: none;
        }
      }
    }

编译之后生成css 就大功告成啦！！！

说明：

css3选择器：

+ 代表选择元素紧邻的元素

~ 代表选择元素同级的元素

有兴趣的可以看 ~ 洗洗睡睡 敷面膜啦

来源：程序媛_Mickey博客园