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>

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

1 个答案: