javascript - 显示与您悬停的元素相关的下拉列表。

Question

在纯 javascript 中创建下拉导航有困难。没有jquery。

菜单应该以一个显示下拉菜单的按钮开始将鼠标悬停在它上面时有 5 个菜单项。将鼠标悬停在 5 个菜单项之一上应该会在原始菜单的右侧显示第二个下拉菜单，其中包含另外 5 个元素。

我遇到的问题是如何定位悬停的导航项的直接子项。

例如，如果我将鼠标悬停在第一项上，则会显示子下拉列表。但它不适用于第二项，依此类推。

如有任何帮助，我们将不胜感激。谢谢!

HTML

<section class="dropdown-container">
  <button id="dropdown-trigger">Dropdown</button>
    <nav class="dropdown-list none">
      <ul class="dropdown">
      <li>
        <span class="nav-link"> Item</span>
          <ul class="sub-dropdown none">
            <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
           </ul>
       </li>

       <li>
         <span class="nav-link">Item/span>
         <ul class="sub-dropdown none">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
          </ul>
        </li>


        <li>
          <span class="nav-link">Item</span>
            <ul class="sub-dropdown none">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
           </ul>
        </li>

        <li>
          <span class="nav-link">Item</span>
            <ul class="sub-dropdown none">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
            </ul>
        </li>

        <li>
          <span class="nav-link">Item</span>
            <ul class="sub-dropdown none">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
            </ul>
       </li>
    </ul>
  </nav>
</section>

JavaScript

var button = document.getElementById('dropdown-trigger'),
    dropdown = document.getElementsByClassName('dropdown'),
    dropdownList = document.querySelector('.dropdown-list'),
    navLink = document.getElementsByClassName('nav-link'),
    link = document.querySelector('.dropdown'),
    subDropdown = document.getElementsByClassName('sub-dropdown');


button.addEventListener('mouseover', displayDropdown);
button.addEventListener('mouseout', removeDropdown);

function displayDropdown() {
  dropdownList.classList.toggle('none');
}

function removeDropdown() {
  dropdownList.classList.toggle('none');
}

JSFIDDLE:https://jsfiddle.net/1dx73fy6/

Answer 1

https://jsfiddle.net/nicksprague/f3mxydfq/3/

var button = document.getElementById('dropdown-trigger'),
dropdown = document.getElementById('dropdown'),
//getElementsByClassName isn't supported past IE 9
//getElementsByTagName is more reliable 
//www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
//www.w3schools.com/jsref/met_document_getelementsbytagname.asp
 dropdown_ = document.getElementsByTagName('li');

 //addeventlistener isn't supported in versions of IE past 9 
 //www.w3schools.com/jsref/met_document_addeventlistener.asp
 button.onmouseover = displayDropdown;
 button.onmouseout = removeDropdown;

for(var i = 0; i < dropdown_.length; i++){

if(dropdown_[i].className === 'dropdown_'){
    dropdown_[i].onmouseover = function(){
        var drop = this.getElementsByTagName('ul')[0];
        //classList isn't supported past IE 10 
        //www.w3schools.com/jsref/prop_element_classlist.asp
        //www.w3schools.com/jsref/prop_html_classname.asp
        drop.className = 'sub-dropdown';
    }
    dropdown_[i].onmouseout = function(){
        var drop = this.getElementsByTagName('ul')[0];
        drop.className = 'sub-dropdown none';  
    }
}
}

function displayDropdown() {
   dropdown.className = 'dropdown';
}

function removeDropdown() {
   dropdown.className = 'dropdown none';
}

<nav id="dropdown-trigger" class="dropdown-list ">

 <button>Dropdown</button>

   <!--change the the trigger event to the actual menu so that hovering over the sub menu doesn't change main menu state-->

  <ul id='dropdown' class="dropdown none">
      <!--add 'none' class an 'dropdown' id to the ul element-->

    <li class="dropdown_">
        <!--add class to each dropdown item-->
      <span class="nav-link">Home</span>
      <ul class="sub-dropdown none">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </li>

    <li class="dropdown_">
      <span class="nav-link">About</span>
      <ul class="sub-dropdown none">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </li>


    <li class="dropdown_">
      <span class="nav-link">Rentals</span>
      <ul class="sub-dropdown none">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </li>

    <li class="dropdown_">
      <span class="nav-link">Design</span>
      <ul class="sub-dropdown none">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </li>

    <li class="dropdown_">
      <span class="nav-link">Work</span>
      <ul class="sub-dropdown none">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </li>
  </ul>
</nav>