弹出菜单 打开光标

问题描述 投票：0回答：1

帮我做一个弹出菜单。我做不到。我没有时间将鼠标悬停在菜单上，它就消失了。我已经尝试了一切，光标消失了。当光标位于这些元素之外时，它应该在悬停时打开和关闭

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #cccccc;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

.button-drop {
    background-color: #0ff;
    padding: 20px 30px;
    border-radius: 5px;
    cursor: pointer;
}

.thisDropDown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(0, -8px);
    transition: .3s all;
    position: absolute;
    top: 8rem;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .05), 0 -1px 2px rgba(0, 0, 0, .04), 0 0 4px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .05);
    border-radius: 5px;
    padding: 40px;
    left: 0;
    right: 0;
    z-index: 2;
}

.thisDropDown.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.thisDropDownSelect {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

a {
    color: aliceblue;
}
  </style>
</head>
<body>
  <div id="app">
    <header class="header container">
        <div><a href="">LOGO</a></div>
        <div class="drop-down" @mouseenter="openDropdown" @mouseleave="closeDropdown">
            <span class="button-drop">Open Menu</span>
            <div class="thisDropDown container" :class="{ active: isDropdownOpen }">
                <div class="thisDropDownSection">
                    <div class="thisDropDownSelect">
                        <span class="thisDropDownTit">Menu 1</span>
                        <span class="thisDropDownTit">Menu 2</span>
                        <span class="thisDropDownTit">Menu 3</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        isDropdownOpen: false
      },
      methods: {
        openDropdown() {
          this.isDropdownOpen = true;
        },
        closeDropdown() {
          this.isDropdownOpen = false;
        }
      }
    });
  </script>
</body>
</html>

请注意，当我尝试将鼠标悬停在菜单上时，菜单会关闭。
我怎样才能纠正这种情况？

vue.js vuejs2 nuxt.js vuejs3 nuxtjs3
1个回答
0
投票

它隐藏是因为下拉列表包含在正在侦听鼠标事件的 

div
中。将鼠标悬停在下拉菜单上将再次触发鼠标事件。您可以使用 
@mouseOver
进行切换，或处理其他一些鼠标事件来管理关闭它，无论您想要什么效果。

在此代码片段中，我已将下拉菜单移出了 

button-drop
所在的 div。我还将 
@mouseEnter
和 
@mouseLeave
更改为 
@mouseOver
，并使用该事件来调用 
toggleDropDown()
。 
toggleDropDown()
只是反转布尔值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #cccccc;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

.button-drop {
    background-color: #0ff;
    padding: 20px 30px;
    border-radius: 5px;
    cursor: pointer;
}

.thisDropDown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(0, -8px);
    transition: .3s all;
    position: absolute;
    top: 8rem;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .05), 0 -1px 2px rgba(0, 0, 0, .04), 0 0 4px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .05);
    border-radius: 5px;
    padding: 40px;
    left: 0;
    right: 0;
    z-index: 2;
}

.thisDropDown.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.thisDropDownSelect {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

a {
    color: aliceblue;
}
  </style>
</head>
<body>
  <div id="app">
    <header class="header container">
        <div><a href="">LOGO</a></div>
        <div class="drop-down" @mouseover="toggleDropDown">
            <span class="button-drop">Open Menu</span>
            
        </div>
        <div class="thisDropDown container" :class="{ active: isDropdownOpen }">
            <div class="thisDropDownSection">
                <div class="thisDropDownSelect">
                    <span class="thisDropDownTit">Menu 1</span>
                    <span class="thisDropDownTit">Menu 2</span>
                    <span class="thisDropDownTit">Menu 3</span>
                </div>
            </div>
        </div>
    </header>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        isDropdownOpen: false
      },
      methods: {
        toggleDropDown() {
          this.isDropdownOpen = !this.isDropdownOpen;
        }
      }
    });
  </script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.