Question

我不熟悉JavaScript DOM，大多数情况下我使用jQuery编写脚本。.我正在尝试使用JavaScript，并遇到以下代码的麻烦。有谁知道可能是什么问题？

我想做的是，当LI悬停时，显示嵌套的OL。某种程度上，以下代码不起作用，即使它在控制台中未显示任何错误。

请帮助我...

var ul = document.querySelector('.gnb');
var li = ul.children;
var ol = document.getElementsByTagName('ol');
var i;

for (i = 0; i < li.length; i++) {
  li[i].addEventListener('mouseenter', myFunction(myshow));
  li[i].addEventListener('mouseleave', myFunction(myhide));
}

function myshow() {
  ol.style.display = 'block'
}

function myhide() {
  ol.style.display = 'none'
}

function myFunction(fn) {
  return function(e) {
    if (e.target.type !== "mouseenter") return;
    fn.call(e.target)
  };
}

.gnb {
  float: left;
  margin-left: 30px;
  width: auto;
  height: 100%;
}

.gnb>li {
  float: left;
  width: 150px;
  height: 100%;
  list-style: none;
}

.sub {
  display: none;
}

.sub.show {
  display: block;
}

<ul class="gnb">
  <li class="gnbLi">
    <a href="#">Why Mailchimp?</a>
  </li>
  <li class="gnbLi" onmouseenter="myFunction()">
    <a href="#">What You Can Do</a>
    <ol class="sub">
      <li><a href="#">Overview</a></li>
      <li><a href="#">Create</a></li>
    </ol>
  </li>
</ul>

Answer 1

您的代码不正确且不干净，我对您的代码做了一些更改：

    (function () {
        var ul = document.querySelector('.gnb');
        var li = ul.children        
        var ol = document.getElementsByTagName('ol')[0];
        var i;

        for (i = 0; i < li.length; i++) {
            li[i].addEventListener('mouseenter', myFunction(myshow));
            li[i].addEventListener('mouseleave', myFunction(myhide));
        }

        function myshow() {
            ol.style.display = 'block'
        }

        function myhide() {
            ol.style.display = 'none'
        }

        function myFunction(fn) {
            return fn;
        }
    })();

        .gnb {
            float: left;
            margin-left: 30px;
            width: auto;
            height: 100%;
        }

            .gnb > li {
                float: left;
                width: 150px;
                height: 100%;
                list-style: none;
            }

        .sub {
            display: none;
        }

            .sub.show {
                display: block;
            }

    <ul class="gnb">
        <li class="gnbLi">
            <a href="#">Why Mailchimp?</a>
        </li>
        <li class="gnbLi">
            <a href="#">What You Can Do</a>
            <ol class="sub">
                <li><a href="#">Overview</a></li>
                <li><a href="#">Create</a></li>
            </ol>
        </li>
    </ul>

Answer 2

问题：基本上，您所做的是将数组作为单个元素处理，因为getElementsByTagName在整个页面中返回ol的数组。

解决： 1.您需要将ol内的嵌套li使用 -event.target获取点击的li。 -querySelector在该ol下获得li。 2.您需要根据事件显示/删除ol。

因此仅将Javascript更改为以下内容，它将起作用

var ul = document.querySelector('.gnb');
var li = ul.children;

for (i = 0; i < li.length; i++) {
  li[i].addEventListener('mouseenter', mouseenter);
  li[i].addEventListener('mouseleave',mouseleave );
}

function mouseenter(event) {
	var ol = event.target.querySelector('ol');
  if(ol){
    ol.style.display = 'block';
  }
}

function mouseleave(event) {
	var ol = event.target.querySelector('ol');
  if(ol){
    ol.style.display = 'none';
  }
}

当li菜单悬停时在导航菜单中循环

2 个答案: