Question

(function() {
  var _li = document.querySelectorAll('.filterList .filterItem');

  for (var i = 0; i < _li.length; i++) {
    var _nestedUl = _li[i].getElementsByClassName('nestedUl')[0];
    var _aLink = _li[i].getElementsByClassName('downIcon')[0];

    //alert(i + ':' + _li[i].className);

    function showNested(e) {
      e.preventDefault();
      _nestedUl.style.display = 'block';
    }

    function hideNested(e) {
      e.preventDefault();
      _nestedUl.style.display = 'none';
    }

    _aLink.addEventListener('mouseover', showNested, false);
    _aLink.addEventListener('mouseout', hideNested, false);

  }

}());

ul.nestedUl {
  display: none;
}

<ul class="filterList">
  <li class="filterItem">
    <a href="" class="downIcon">
      课程 <i class="fa fa-chevron-down"></i>
    </a>
    <ul class="nestedUl">
      <li>
        <a href="" class="selected">
          <i class="fa fa-check"></i> &nbsp HTML5 course
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5 course
        </a>
      </li>

      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5
        </a>
      </li>
    </ul>
  </li>

  <li class="filterItem">
    <a href="" class="downIcon">
      主题 <i class="fa fa-chevron-down"></i>
    </a>
    <ul class="nestedUl">
      <li>
        <a href="" class="selected">
          <i class="fa fa-check"></i> &nbsp HTML5 subject
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5 subject
        </a>
      </li>

      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5
        </a>
      </li>
    </ul>
  </li>

  <li class="filterItem">
    <a href="" class="downIcon">
      排序 <i class="fa fa-chevron-down"></i>
    </a>
    <ul class="nestedUl">
      <li>
        <a href="" class="selected">
          <i class="fa fa-check"></i> &nbsp HTML5 order
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5 order
        </a>
      </li>

      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5
        </a>
      </li>
    </ul>

  </li>


</ul>

我想做的是在鼠标悬停时显示ul元素，即使用纯javascript制作下拉菜单。但都显示了中间元素，我不知道它有什么问题。似乎语法是正确的，我错过了什么？

感谢

Answer 1

您可以单独使用CSS：

ul.nestedUl {
  display: none;
}
.filterList > li:hover .nestedUl {
  display: block;
}

<ul class="filterList">
  <li class="filterItem">
    <a href="" class="downIcon">
      课程 <i class="fa fa-chevron-down"></i>
    </a>
    <ul class="nestedUl">
      <li>
        <a href="" class="selected">
          <i class="fa fa-check"></i> &nbsp HTML5 course
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5 course
        </a>
      </li>

      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5
        </a>
      </li>
    </ul>
  </li>

  <li class="filterItem">
    <a href="" class="downIcon">
      主题 <i class="fa fa-chevron-down"></i>
    </a>
    <ul class="nestedUl">
      <li>
        <a href="" class="selected">
          <i class="fa fa-check"></i> &nbsp HTML5 subject
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5 subject
        </a>
      </li>

      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5
        </a>
      </li>
    </ul>
  </li>

  <li class="filterItem">
    <a href="" class="downIcon">
      排序 <i class="fa fa-chevron-down"></i>
    </a>
    <ul class="nestedUl">
      <li>
        <a href="" class="selected">
          <i class="fa fa-check"></i> &nbsp HTML5 order
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5 order
        </a>
      </li>

      <li>
        <a href="">
          <i class="fa fa-check"></i> &nbsp HTML5
        </a>
      </li>
    </ul>
  </li>
</ul>

在你的JavaScript中，它总是将事件附加到最后一个，因为错误的循环。

Answer 2

问题是(function() { var _li = document.querySelectorAll('.filterList .filterItem'); for (var i = 0; i < _li.length; i++) { var _nestedUl = _li[i].getElementsByClassName('nestedUl')[0]; var _aLink = _li[i].getElementsByClassName('downIcon')[0]; (function(nestedUl) { function showNested(e) { e.preventDefault(); nestedUl.style.display = 'block'; } function hideNested(e) { e.preventDefault(); nestedUl.style.display = 'none'; } _aLink.addEventListener('mouseover', showNested, false); _aLink.addEventListener('mouseout', hideNested, false); })(_nestedUl); } }());是相同的引用，你只是在for循环中重写它。你可以在这里使用js function closure。

这段代码应该可以运行，你可以优化它，我只做了一些你可以理解差异的最小变化。

{{1}}

悬停事件只触发一个元素，您可以在代码段

2 个答案: