完整代碼
初學(xué)前端翔横，不喜勿噴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二級(jí)導(dǎo)航</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
#app {
position: relative;
display: flex;
width: 100%;
height: 100%;
}
nav {
padding-top: 20px;
width: 200px;
background-color: rgba(223, 230, 233, 1.0);
border-right: 1px solid #ddd;
box-shadow: 3px 0 2px 2px #bfbfbf;
height: 100%;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.pre_menu {
position: relative;
padding: 10px;
font-size: 18px;
font-weight: 300;
}
.pre_menu::after {
content: "";
position: absolute;
top: 45px;
left: 0;
height: .5px;
width: 100%;
background-color: rgba(0,170,255,.2)
}
.sub_menu {
padding: 15px;
position: relative;
font-size: 13px;
}
.pre_menu:hover,
.sub_menu:hover {
cursor: pointer;
}
.sub_menu:hover{
background: rgba(96, 163, 188,1.0);
}
.sub_menu::after {
content: "";
position: absolute;
top: 46px;
left: 0;
height: 1px;
width: 100%;
background-color: #FFFFFF;
}
a {
display: flex;
justify-content: space-between;
vertical-align: top;
}
svg {
width: 20px;
height: 20px;
}
a>div {
transition: .5s;
}
.down {
transform: rotate(0deg);
}
.up {
transform: rotate(180deg);
}
.active{
background:rgba(116, 185, 255,1.0);
}
#nav-title {
text-align: center;
font-size: 20px;
font-weight: 300;
margin-bottom: 20px;
background: rgba(45, 52, 54, 1.0);
color: white;
}
</style>
</head>
<body>
<div id="app">
<nav>
<div id="nav-title">
導(dǎo)航欄
</div>
<ul>
<li v-for="(item,index) in lists" :key="index">
<a @click="preClick(index)" class="pre_menu" :class="cur==index?'active':null" :title="item.name">
<span>{{item.name}}</span>
<div :class="cur==index?'up':'down'"><svg t="1596169803429" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1142">
<path d="M499.8 707.3L219.3 426.8c-10.8-10.8-10.8-28.4 0-39.2 10.8-10.8 28.4-10.8 39.2 0l261.1 261.1 261.1-261.1c10.8-10.8 28.4-10.8 39.2 0 10.8 10.8 10.8 28.4 0 39.2L539.4 707.3c-5.4 5.4-12.6 8.1-19.8 8.1-7.1 0-14.3-2.7-19.8-8.1z"
fill="#263554" p-id="1143"></path>
</svg></div>
</a>
<ul v-show="cur==index">
<li v-for="(sub,i) in item.subItems" :key="i">
<a class="sub_menu" :title="sub">{{sub}}</a>
</li>
</ul>
</li>
</ul>
</nav>
<main>
</main>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
cur: null,
lists: [{
name: '一級(jí)菜單',
subItems: ['二級(jí)菜單', '二級(jí)菜單', '二級(jí)菜單']
},
{
name: '一級(jí)菜單',
subItems: ['二級(jí)菜單', '二級(jí)菜單', '二級(jí)菜單']
},
{
name: '一級(jí)菜單',
subItems: ['二級(jí)菜單', '二級(jí)菜單', '二級(jí)菜單']
},
{
name: '一級(jí)菜單',
subItems: ['二級(jí)菜單', '二級(jí)菜單', '二級(jí)菜單']
}
]
},
methods: {
preClick(index) {
this.cur = this.cur == index ? null : index
}
},
mounted() {}
})
</script>
</body>
</html>
實(shí)現(xiàn)目標(biāo)
1.導(dǎo)航欄點(diǎn)擊打開(kāi)
2.當(dāng)前欄點(diǎn)擊打開(kāi)，其他欄關(guān)閉
3.再次點(diǎn)擊當(dāng)前欄萍恕，關(guān)閉
4.右側(cè)圖標(biāo)切換
實(shí)現(xiàn)效果
