Question

我想在我的nav中的一个li元素内的ul上添加类。我的问题是我想在悬停上显示列表，然后单击它上的某项，但是当我在该li菜单上单击回车时，当我想单击该菜单时，菜单消失了。我想在普通JavaScript中做到这一点。

document.addEventListener('DOMContentLoaded', function () {
    var dropdownItem = document.querySelector('.dropdown-item');
    var dropdown = document.querySelector('.dropdown');

    dropdownItem.addEventListener('mouseenter', function (e) {
        dropdown.classList.add('dropdown-show');
    });
    dropdownItem.addEventListener('mouseleave', function () {
        dropdown.classList.remove('dropdown-show');
    })

})

  .menu {
     list-style: none;
     display: flex;
     width: 30%;
     justify-content: space-between;
     align-items: center;
  }
   .menu li {
     position: relative;
  }
   .menu li a {
     color: #999;
     text-decoration: none;
  }
   .menu .dropdown-item {
     position: relative;
  }
   .menu .dropdown-item .dropdown {
     position: absolute;
     list-style: none;
     top: 5px;
     padding-top: 40px;
     left: -30px;
     visibility: hidden;
     opacity: 0;
     transition: 0.3s;
  }
   .menu .dropdown-item .dropdown .triangle {
     border: 10px solid transparent;
     border-bottom-color: #000;
     width: 0;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     position: absolute;
  }
   .menu .dropdown-item .dropdown.dropdown-show {
     opacity: 1;
     visibility: visible;
  }
   .menu .dropdown-item .dropdown li {
     background-color: #000;
     padding: 10px 20px;
     font-weight: lighter;
  }

<ul class="menu">
    <li class="dropdown-item"><a href="#">O Firmie</a>
        <ul class="dropdown">
            <div class="triangle"></div>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Nasz team</a></li>
            <li><a href="#">Historia</a></li>
        </ul>
    </li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

Answer 1

我的li的默认Z索引在某种程度上低于其他分度

.menu {
    list-style: none;
    display: flex;
    width: 30%;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}

现在它可以正常工作，并且菜单在该菜单的鼠标左键上不消失

谢谢你们的帮助

Answer 2

您的SCSS发生了很多事情，在jsfiddle中不起作用。就是说，我能够使用此小片段获得您正在寻求的基本功能。

代码的问题是，您正在将mouseleave事件添加到元素（dropdown-item）中，该事件首先显示了您的下拉列表。 mouseleave事件应该在父事件上（下拉列表）。

代码如下：

document.getElementsByClassName("dropdown-item")[0].addEventListener("mouseover", function(e) {
    const parent = e.target.parentElement;
    if (parent && parent.tagName === "LI" && parent.classList.contains("dropdown-item")) {
        const parent = e.target.parentElement;
        parent.children[1].classList.add("active");
    }
});
    
document.getElementsByClassName("dropdown")[0].addEventListener("mouseout", function(e) {
    e.target.classList.remove("active");
});

.dropdown {
    display: none;
}
    
.active {
    display: block;
}

<ul class="menu">
    <li class="dropdown-item"><a href="#">O Firmie</a>
        <ul class="dropdown">
            <div class="triangle"></div>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Nasz team</a></li>
            <li><a href="#">Historia</a></li>
        </ul>
    </li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

*请注意，这可以使您快速了解如何进行操作。它既不是完美的代码，也不是高效的代码。

Answer 3

使用“ mouseover”事件代替“ mouseenter”和“ mouseout”事件，而不是“ mouseleave”。

Answer 4

您可以使用以下内容：

<ul class="dropdown" onmouseover="hoverTrue($event)" onmouseout="hoverOut($event)">

function hoverTrue(event) {
 event.target.style.display = 'block'; 
 //or add class
 event.target.setAttribute('class', 'something');
}

function hoverOut(event) {
 event.target.style.display = 'none';
 //or add class
 event.target.setAttribute('class', 'something');
}

使用JavaScript在悬停时添加类

4 个答案: