顯示與您懸停的項目相關的下拉列表。

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>