[Vue]实现二级导航树目录

最新推荐文章于 2023-08-13 09:28:11 发布

iChangebaobao

最新推荐文章于 2023-08-13 09:28:11 发布

阅读量773

点赞数

分类专栏： Vue JavaScript

本文链接：https://blog.csdn.net/iChangebaobao/article/details/103787081

版权

Vue 同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 2 订阅

订阅专栏

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实现无限级导航树目录

iChangebaobao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
[Vue]实现二级导航树目录

html<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>导航目录</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="...
复制链接

扫一扫