Добавить класс при наведении курсора, используя JavaScript

Question

Я хочу добавить класс на ul, который находится внутри моего элемента li в nav.Моя проблема в том, что я хочу показать список при наведении курсора, а затем щелкнуть что-нибудь по нему, но когда я нажимаю мышью, вход в это меню показывает, и когда я хочу перейти вниз и щелкнуть что-то, меню исчезает.Я хочу сделать это в ванильном 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

С вашим 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 2

По умолчанию Z-index моего li был как-то под другим div ...

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

Теперь он работает отлично, и меню не исчезает при отпускании мыши в этом меню

Спасибо, ребятаза помощь

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');
}