本文介绍了如何使用Vue来实现手风琴效果，通过示例代码展示了toggle方法在切换元素可见状态中的应用。点击时，仅展开点击的手风琴项，其他项将关闭。
效果图：
源码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
*{
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;
}
</style>
</head>
<body>
<div id="app">
<div class="list" v-for="(l,i) in lists" :key="i">
<div class="title" @click="toggle($event)">{
{l.title}}</div>
<ul class="item">
<li v-for="(item,index) in l.items" :key="index">{
{item}}</li>
</ul>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
lists: [
最低0.47元/天 解锁文章
扫一扫
6317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
