显示与您悬停的项目相关的下拉列表。

Question

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

菜单应该以单个按钮开头，当您将鼠标悬停在菜单上时，该按钮会显示下拉菜单项 。将鼠标悬停在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>