vue怎么实现手风琴效果_vue手风琴效果

Document

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

li{

padding-left: 10px;

line-height: 2;

}

li:hover{

background-color: #eee;

}

.list{

padding: 0 50px;

}

.list .title{

border: 1px solid #ccc;

padding: 10px 5px;

cursor: pointer;

-webkit-user-select: none;

user-select: none;

font-size: 18px;

font-weight: bold;

}

.list .item{

border: 1px solid #ccc;

}

.list:not(:nth-of-type(1)) .item{

display: none;

}

sitesData

• 1
• 1
• 1
• 1
• 1

sitesData

• 1
• 1
• 1
• 1
• 1

sitesData

• 1
• 1
• 1
• 1
• 1

var app = new Vue({

el: '#app',

methods: {

toggle: function(ev){

var $title = $(ev.target);

$title.parents('#app').find('.item').hide();

$title.next().show(1000);

}

}

})