如何在悬停事件显示后保持下拉列表显示?
How to keep a dropdown displayed after showing with hover event?
我有一个 header 由到其他网站的导航 link 组成,其中一些 link 是通过 drop-down 菜单显示的。
通过事件悬停,我添加了一个动画和样式,以查看您每时每刻都在做什么,如果是 drop-down,则会向您显示所有选项。
问题是我不知道如何将 drop-down 菜单显示给 select 中的任何一个 link,并且在 @mouseleave 的情况下它会消失。
我试图将事件 @mouseleave 带到下拉列表本身,但它不起作用。
如果有人能让我看到我的错误。
预先感谢您的时间和帮助。
我给你留了一个 link 和一个我现在可以使用的示例
https://codepen.io/carlosurra/pen/YzqXjdP
这是我的模板
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link-toggle" @mouseover="animalList = true" @mouseleave="animalList = false" >PERSONAL FORM</a>
<ul class='dropdown-menu' v-if="animalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' @mouseover="serviceList = true" @mouseleave="serviceList = false">SERVICES</a>
<ul class='dropdown-menu' v-if="serviceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' @mouseover="contactList = true" @mouseleave="contactList = false">CONTACT</a>
<ul class='dropdown-menu' v-if="contactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
这是我的css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
align-items: center;
}
.nav-item {
padding: 25px;
position: relative;
}
.nav-link:hover {
color: grey;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
margin-top: 10px;
list-style: none;
position: absolute;
padding: 1em 1.25em 0.5em 0.75em;
background-color: white;
width: max-content;
box-shadow: 0px 14px 24px 0px rgba(0,0,0,0.21);
}
.dropdown-menu-item {
margin: 20px 0 20px 0;
}
.dropdown-menu-link {
font-size: 14px;
font-weight: bold;
color: red;
text-decoration: none;
}
.head {
font-size: 14px;
color: red;
font-weight: bold;
text-decoration: none;
}
.head:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 35%;
background: red;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.head:hover:before,
.head:focus:before {
visibility: visible;
transform: scaleX(1);
}
.added {
display: none;
}
将 mouseover 和 mouseleave 事件放在包含 link 和下拉列表的 <li>
元素上。
<li class="nav-item" @mouseover="animalList = true" @mouseleave="animalList = false">
<a class="nav-link menu-link-toggle">PERSONAL FORM</a>
<ul class='dropdown-menu' v-if="animalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
我有一个 header 由到其他网站的导航 link 组成,其中一些 link 是通过 drop-down 菜单显示的。 通过事件悬停,我添加了一个动画和样式,以查看您每时每刻都在做什么,如果是 drop-down,则会向您显示所有选项。 问题是我不知道如何将 drop-down 菜单显示给 select 中的任何一个 link,并且在 @mouseleave 的情况下它会消失。 我试图将事件 @mouseleave 带到下拉列表本身,但它不起作用。 如果有人能让我看到我的错误。 预先感谢您的时间和帮助。 我给你留了一个 link 和一个我现在可以使用的示例
https://codepen.io/carlosurra/pen/YzqXjdP
这是我的模板
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link-toggle" @mouseover="animalList = true" @mouseleave="animalList = false" >PERSONAL FORM</a>
<ul class='dropdown-menu' v-if="animalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' @mouseover="serviceList = true" @mouseleave="serviceList = false">SERVICES</a>
<ul class='dropdown-menu' v-if="serviceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' @mouseover="contactList = true" @mouseleave="contactList = false">CONTACT</a>
<ul class='dropdown-menu' v-if="contactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
这是我的css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
align-items: center;
}
.nav-item {
padding: 25px;
position: relative;
}
.nav-link:hover {
color: grey;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
margin-top: 10px;
list-style: none;
position: absolute;
padding: 1em 1.25em 0.5em 0.75em;
background-color: white;
width: max-content;
box-shadow: 0px 14px 24px 0px rgba(0,0,0,0.21);
}
.dropdown-menu-item {
margin: 20px 0 20px 0;
}
.dropdown-menu-link {
font-size: 14px;
font-weight: bold;
color: red;
text-decoration: none;
}
.head {
font-size: 14px;
color: red;
font-weight: bold;
text-decoration: none;
}
.head:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 35%;
background: red;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.head:hover:before,
.head:focus:before {
visibility: visible;
transform: scaleX(1);
}
.added {
display: none;
}
将 mouseover 和 mouseleave 事件放在包含 link 和下拉列表的 <li>
元素上。
<li class="nav-item" @mouseover="animalList = true" @mouseleave="animalList = false">
<a class="nav-link menu-link-toggle">PERSONAL FORM</a>
<ul class='dropdown-menu' v-if="animalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>