<!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">
<div class="title" @click="toggle($event)">sitesData</div>
<ul class="item">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="list">
<div class="title" @click="toggle($event)">sitesData</div>
<ul class="item">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="list">
<div class="title" @click="toggle($event)">sitesData</div>
<ul class="item">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
toggle: function(ev){
var $title = $(ev.target);
$title.parents('#app').find('.item').hide();
$title.next().show(1000);
}
}
})
</script>
</body>
</html>
