显示带有悬停事件后如何保持下拉菜单显示？

问题描述

我有一个标题，该标题由指向其他网站的导航链接组成，其中某些链接通过下拉菜单显示。 通过事件悬停，我添加了动画和样式来随时查看您的活动，如果出现下拉菜单，则会显示所有选项。 事实是，我不知道如何保持显示下拉菜单来选择任何链接，并且在使用@mouseleave的情况下它消失了。 我尝试将事件@mouseleave移至下拉菜单本身，但它不起作用。 如果有人可以让我看到我的错误。 在此先感谢您的时间和帮助。 我给您留下了一个链接，其中包含我现在可以使用的示例

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.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事件放在包含链接和下拉列表的<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>