vue怎么实现手风琴效果_Vue.js手风琴菜单组件开发实例

本文为大家分享了vuejs组件开发之手风琴菜单组件实例，供大家参考，具体内容如下

小图标是引入font-awesome字体图标库绘制的。效果如下图所示：

代码：

index

* {

margin: 0;

padding: 0;

}

body {

padding-top: 100px;

}

#tabPanel {

width: 120px;

height: auto;

margin: 0 auto;

}

#tabPanel .item .sildermun ul li {

height: 40px;

line-height: 40px;

list-style: none;

}

#tabPanel .item .sildermun ul li:hover {

background: #ccc;

}

#tabPanel .item .menutitle {

height: 40px;

line-height: 40px;

text-align: center;

background: #ccc;

}

#tabPanel .item .sildermun {

text-align: center;

background: #eee;

}

 {{parentItem}}

•  {{v+index}}