即使鼠标悬停，下拉菜单也会隐藏答案

【问题标题】：dropdown hides even when mouse is over it即使鼠标悬停，下拉菜单也会隐藏
【发布时间】：2020-08-10 10:17:21
【问题描述】：

我正在尝试做一个下拉菜单。因此，当我将鼠标悬停在按钮上时，列表应该会弹出，当我离开按钮以及列表（即 listcontainer）时，列表应该消失。除后半部分外，一切正常。一旦我离开按钮，列表就会消失（即使我在列表容器上方）。 Issue我不明白为什么。您可以忽略 CSS 代码和 html 代码。语义：请注意按钮是一个带有类按钮的 div

如果你读过代码： hideul 函数从按钮进入列表容器时会运行多次（请查看控制台）。我也不明白这部分。也请让我知道是否有更好的方法来执行此逻辑。

Please visit to see the error

var button = document.querySelector(".button")
var list = document.querySelector("ul")
var listcontainer = document.querySelector(".listcontainer")

var mouseleftlistcontainer = true
var mouseleftbutton = true

function hideul(e, text) {
    console.log(text)
    if (mouseleftlistcontainer && mouseleftbutton) {
        list.classList.remove("effectt")
    }
}

button.addEventListener("mouseover", e => {
    list.classList.add("effectt")
    mouseleftbutton = false
    hideul(e, "mouse entered button")
})

button.addEventListener("mouseleave", e => {
    mouseleftbutton = true
    hideul(e, " mouse left button")
})


listcontainer.addEventListener("mouseover", e => {
    mouseleftlistcontainer = false
    hideul(e, "mouse entered listcontainer")
})

listcontainer.addEventListener("mouseleave", e => {
    mouseleftlistcontainer = true
    hideul(e, "mouse left listcontainer")
})

.button{
    background-color: lightgreen;
    width:200px;
    height:50px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top:30px;
    font-size: 25px;
}

.container{
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


ul{
    font-size: 20px;
    list-style: none;
    transform: translateY(-200px);
    transition: 0.2s all;
    
}

li{
    margin:2px;
    background-color: lightgreen;
    border-radius:5px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;   

}

.listcontainer{
    height:170px;
    overflow: hidden;
    background-color: red;
}

.effectt{
    transform: translateY(00px);
}

ul{
    background-color: bisque;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="container">
        <div class="button">ONE</div>
        <div class="listcontainer">

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>
</body>

</html>

【问题讨论】：

标签： javascript html css hover dropdown

【解决方案1】：

您应该将受悬停效果影响的所有对象放入容器中并触发该效果，如下所示：

var container = document.querySelector(".btn-container")
var list = document.querySelector("ul")

var mouseincontainer = true

function hideul(show, text) {
    console.log(text);
    
    if (mouseincontainer) {
      list.classList.add("effectt")
    }
    else {
      list.classList.remove("effectt")
    }
}

container.addEventListener("mouseover", e => {
    hideul(true, "mouse entered button")
})

container.addEventListener("mouseleave", e => {
    hideul(false, " mouse left button")
})

.button{
    background-color: lightgreen;
    width:200px;
    height:50px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top:30px;
    font-size: 25px;
}

.container{
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


ul{
    font-size: 20px;
    list-style: none;
    transform: translateY(-200px);
    transition: 0.2s all;
    
}

li{
    margin:2px;
    background-color: lightgreen;
    border-radius:5px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;   

}

.listcontainer{
    height:170px;
    overflow: hidden;
    background-color: red;
}

.effectt{
    transform: translateY(00px);
}

ul{
    background-color: bisque;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="container">
      <div class="btn-container">
        <div class="button">ONE</div>
        <div class="listcontainer">

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
      </div>
    </div>
</body>

</html>

【讨论】：

@YogeshBhatt 据我所知，mouseleftbutton 变为 true 和 mouseleftlistcontainer 变为 false 之间有很短的时间，因此在短时间内使两者都为 true 并删除结果上课。无论如何，它是解决这个问题的一种非常糟糕的方法，所以我不会大力投资试图解决它。最好按照我的方式或其他方式。
好的，非常感谢。但是任何线索为什么当 hideul 从按钮进入 listcontainer 时会多次触发？
没问题。对于这个问题，我建议你在这里查看这个例子，它应该解释一切:) w3schools.com/jquery/…。 @YogeshBhatt
这是一个jQuery示例，但同样的原理也适用于纯JS。
知道了，所以当列表项向上移动时它会再次触发

【解决方案2】：

这是您代码中的问题

if (mouseleftlistcontainer && mouseleftbutton) {
        list.classList.remove("effectt")
    }

当你离开按钮时，这个条件就满足了，你的类就被移除了，但是一旦你进入列表容器，你就需要重新添加'effectt'类。

【讨论】：