Как заставить пункты меню появляться при наведении курсора с помощью JavaScript - PullRequest
Новая
       20

Как заставить пункты меню появляться при наведении курсора с помощью JavaScript

0 голосов
/ 23 апреля 2019

Я занимаюсь разработкой веб-сайта с мобильным меню, в котором три элемента должны отображаться при наведении указателя мыши на другой элемент меню (не родительский!)

Я пробовал css, но это было невозможно без изменения структуры html, поэтому я оставил это сейчас. Я также попробовал функцию onclick, но мобильное меню исчезает после щелчка, так что оно тоже не работает. Следовательно, onmouseover javascript будет предпочтительнее.

Код JavaScript, который у меня есть на данный момент: 

<script type='text/javascript'>
    document.getElementsByClassName("holder").onmouseover = function(){mouseOver()};
    document.getElementsByClassName("holder").onmouseout = function() {mouseOut()};
    function mouseOver() { 
    document.getElementsByClassName("helper").style.display=="block";}
    function mouseOut() {
    document.getElementsByClassName("helper").style.display=="none";}
</script>

HTML выглядит следующим образом: 

<ul class="mm-listview">
<li class="holder menu-item menu-item-type-custom menu-item-object-custom"><a href="#">Holder</a></li>
<li class="helpers menu-item menu-item-type-custom menu-item-object-custom menu-item-has-icon"><a href="https://example.com/">Example</a></li>
<li class="helpers menu-item menu-item-type-custom menu-item-object-custom menu-item-has-icon"><a href="https://example.com/">Example</a>
</li></ul>

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

getElementsByClassName вернет массив со всеми элементами с классом helper . Вам нужно изменить отображение каждого из этих элементов, примерно так: 

    function mouseOver() { 
         var myList = document.getElementsByClassName("helper");
         myList.forEach(function(item){
             item.style.display="block";
         });
    }
0 голосов
/ 23 апреля 2019 
Modified HTML below.

<ul class="mm-listview">
<li id="holder"><a href="#">Holder</a></li>
<li id="helper1"><a href="https://example.com/">Example</a></li>
<li id="helper2"><a href="https://example.com/">Example</a>
</li></ul>

Modified JS below.
<script type='text/javascript'>
    document.getElementById("holder").onmouseover = function(){mouseOver()};
    document.getElementById("holder").onmouseout = function() {mouseOut()};
    function mouseOver() { 
    document.getElementById("helper1").style.display=="block";}
    function mouseOut() {
    document.getElementById("helper").style.display=="none";}
</script>

Это должно работать.

...