Vue @mouseover和@mouseout实现下拉二级导航
作者：互联网
效果展示
一、设置二级导航，添加@mouseover、@mouseout
//注意二级导航放置位置
<div
class="recommendation-title1"
:class="show1 == 1 ? 'redtitle' : 'commontitle'"
@click="turnRed1()"
@mouseover="dorpDown1($event)"
@mouseout="dorpUp1($event)"
>
蔬菜 v
<div class="secondnav1">
<ul>
<li v-for="sc in scs" :key="sc.name">
<a href="">
{{sc.name}}
</a>
</li>
</ul>
</div>
</div>
二、添加methods
通过 display 来显示/隐藏
methods: {
dorpDown1(event){
let secondnav1 = event.currentTarget.childNodes[1];
secondnav1.style.display = "block";
},
dorpUp1(event){
let secondnav1 = event.currentTarget.childNodes[1];
secondnav1.style.display = "none";
},
dorpDown2(event){
let secondnav2 = event.currentTarget.childNodes[1];
secondnav2.style.display = "block";
},
dorpUp2(event){
let secondnav2 = event.currentTarget.childNodes[1];
secondnav2.style.display = "none";
},
}
三、所有代码
<template>
<div class="nav">
<div class="title">
<div
class="recommendation-title1"
:class="show1 == 1 ? 'redtitle' : 'commontitle'"
@click="turnRed1()"
@mouseover="dorpDown1($event)"
@mouseout="dorpUp1($event)"
>
蔬菜 v
<div class="secondnav1">
<ul>
<li v-for="sc in scs" :key="sc.name">
<a href="">
{{sc.name}}
</a>
</li>
</ul>
</div>
</div>
<div
class="recommendation-title2"
:class="show2 == 1 ? 'redtitle' : 'commontitle'"
@click="turnRed2()"
@mouseover="dorpDown2($event)"
@mouseout="dorpUp2($event)"
>
水果 v
<div class="secondnav2">
<ul>
<li v-for="sg in sgs" :key="sg.name">
<a href="">
{{sg.name}}
</a>
</li>
</ul>
</div>
</div>
<div
class="recommendation-title3"
:class="show3 == 1 ? 'redtitle' : 'commontitle'"
@click="turnRed3()"
@mouseover="dorpDown3($event)"
@mouseout="dorpUp3($event)"
>
肉类 v
<div class="secondnav3">
<ul>
<li v-for="rl in rls" :key="rl.name">
<a href="">
{{rl.name}}
</a>
</li>
</ul>
</div>
</div>
<div
class="recommendation-title4"
:class="show4 == 1 ? 'redtitle' : 'commontitle'"
@click="turnRed4()"
@mouseover="dorpDown4($event)"
@mouseout="dorpUp4($event)"
>
熟食 v
<div class="secondnav4">
<ul>
<li v-for="ss in sss" :key="ss.name">
<a href="">
{{ss.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import App from '../App.vue';
export default {
components: { App },
data() {
return {
show1: "1",
show2: "",
show3: "",
show4: "",
scs:[
{name:"土豆"},
{name:"白菜"},
{name:"豆芽"},
{name:"花菜"},
],
sgs:[
{name:"苹果"},
{name:"西瓜"},
{name:"香蕉"},
{name:"草莓"},
],
rls:[
{name:"排骨"},
{name:"鸡腿"},
{name:"里脊"},
{name:"牛舌"},
],
sss:[
{name:"烧饼"},
{name:"包子"},
{name:"煎饼"},
{name:"烧麦"},
]
};
},
methods: {
dorpDown1(event){
let secondnav1 = event.currentTarget.childNodes[1];
secondnav1.style.display = "block";
},
dorpUp1(event){
let secondnav1 = event.currentTarget.childNodes[1];
secondnav1.style.display = "none";
},
dorpDown2(event){
let secondnav2 = event.currentTarget.childNodes[1];
secondnav2.style.display = "block";
},
dorpUp2(event){
let secondnav2 = event.currentTarget.childNodes[1];
secondnav2.style.display = "none";
},
dorpDown3(event){
let secondnav3 = event.currentTarget.childNodes[1];
secondnav3.style.display = "block";
},
dorpUp3(event){
let secondnav3 = event.currentTarget.childNodes[1];
secondnav3.style.display = "none";
},
dorpDown4(event){
let secondnav4 = event.currentTarget.childNodes[1];
secondnav4.style.display = "block";
},
dorpUp4(event){
let secondnav4 = event.currentTarget.childNodes[1];
secondnav4.style.display = "none";
},
turnRed1: function () {
this.show1 = 1;
this.show2 = 0;
this.show3 = 0;
this.show4 = 0;
},
turnRed2: function () {
this.show2 = 1;
this.show1 = 0;
this.show3 = 0;
this.show4 = 0;
},
turnRed3: function () {
this.show3 = 1;
this.show1 = 0;
this.show2 = 0;
this.show4 = 0;
},
turnRed4: function () {
this.show4 = 1;
this.show1 = 0;
this.show2 = 0;
this.show3 = 0;
},
},
};
</script>
<style lang="less" scoped>
.secondnav1 a,.secondnav2 a,.secondnav3 a,.secondnav4 a{
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
height: 25px;
}
.secondnav1 a:hover,.secondnav2 a:hover,.secondnav3 a:hover,.secondnav4 a:hover{
color: red;
text-decoration: underline;
}
.secondnav1,.secondnav2,.secondnav3,.secondnav4{
display: none;
border-radius: 3px;
left: 30px;
top: 40px;
width: 70px;
height: 100px;
background-color: rgb(247, 216, 216);
position: absolute;
}
.commontitle {
color: black;
cursor: pointer;
font-size: 20px;
width: 125px;
height: 37px;
line-height: 40px;
}
.redtitle {
color: #de2013;
border-bottom: 3px solid#de2013;
}
.recommendation-title1:hover,
.recommendation-title2:hover,
.recommendation-title3:hover,
.recommendation-title4:hover {
color: #de2013;
border-bottom: 3px solid#de2013;
}
.recommendation-title1,
.recommendation-title2,
.recommendation-title3,
.recommendation-title4 {
cursor: pointer;
position: relative;
font-size: 20px;
width: 125px;
height: 37px;
line-height: 40px;
}
.title {
display: flex;
background-color: rgb(223, 223, 223);
width: 500px;
height: 40px;
}
.nav {
border: 1px solid rgb(180, 179, 179);
width: 500px;
height: 200px;
}
a {
color: black;
text-decoration: none;
}
li {
list-style-type: none;
}
ul {
list-style: none; /*清除列表默认样式*/
padding: 0; /*清除padding*/
margin: 0;
}
</style>
标签：style,Vue,name,event,let,currentTarget,mouseout,mouseover,display 来源： https://www.cnblogs.com/Utopia-in-reality/p/14147896.html