html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>导航目录</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="font/iconfont.css">
<script src='js/vue.js'></script>
<script src='js/index.js'></script>
</head>
<body>
<div class="tree" id='my'>
<ul>
<li class="p_item" v-for="(item,index) in items">
<a class="p_title" @click="n = index" :class="index==n ?'selected':' '">
<i class="iconfont" :class="item.icon"></i>{{item.name}}
<b :class="index==n ? 'down':'up'">^</b>
</a>
<ul class="c_item" v-show="index==n">
<li v-for="sub in item.subItems">
<a>{{sub.name}}</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
</body>
</html>
css
* {
padding: 0px;
margin: 0px;
}
ul {
list-style-type: none;
}
a {
color: #333;
text-decoration: none;
}
body {
font-size: 14px;
background-color: #f9f9f9;
}
body,html{
width:100%;
height:100%;
}
.tree {
width: 200px;
height: 100%;
background: #fff;
}
.tree> ul {
height: 100%;
}
.p_title {
color: #333;
display: block;
padding: 15px;
cursor:pointer;
border-bottom: 1px solid #f1f1f1;
}
.selected {
color: #1890ff;
border-bottom: 1px solid #1890ff;
}
.p_title> i{
padding-right:10px;
}
.p_title b{
float: right;
transition:all ease 1s;
}
.up{
transform:rotate(0deg);
}
.down{
transform:rotate(180deg);
}
.p_title:hover {
color: #1890ff;
border-bottom: 1px solid #1890ff;
}
.c_item a {
display: block;
padding: 10px 20px 10px 40px;
background: #fff;
color: #333;
cursor:pointer;
}
.c_item a:hover {
color: #1890ff;
background: #e6f7ff;
border-right: 4px solid #1890ff;
}
index.js
window.onload = function(){
new Vue({
el:"#my",
data:{
items:[
{
name:'标题 A',
icon:'icon-yonghu',
subItems:[
{name:'内容A1'},
{name:'内容A2'},
{name:'内容A3'}]
},
{
name:'标题 B',
icon:'icon-licai',
subItems:[
{name:'内容B1'},
{name:'内容B2'},
{name:'内容B3'}]
},
{
name:'标题 C',
icon:'icon-jia',
subItems:[
{name:'内容C1'},
{name:'内容C2'},
{name:'内容C3'}]
}
],
n:0
}
})
}
效果
另一篇,喜欢关注并点个赞哟
Vue实现无限级导航树目录