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

display a list of dropdown relevant to the item you're hovering.

本文关键字：项目 下拉列表 悬停 显示      更新时间：2023-09-26

在纯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/

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>

相关文章：