Question

在我的网站中，我创建了一个简单的下拉菜单，但我的问题是，如果触发下拉列表的mouseleave上发生<span>，则无法关闭。

这是我的代码：

＆＃13;

//Find the dropdown span
var header = document.getElementById('drop');

//Find the ul with the links
var ul = document.getElementById('nav-dropdown');


//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";

//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";

var open = 0;

//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
  ul.style.display = "block";

  header.style.borderRadius = "7px 7px 0 0";

  if (links[0].getBoundingClientRect().width > width) {
    links[0].style.borderRadius = "0 7px 0 0";
  }
  open = 1;
});

//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
  ul.style.display = "none";
  header.style.borderRadius = "7px";
  open = 0;
});

//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
	ul.style.display = "none";
  header.style.borderRadius = "7px";
});
*/

＆＃13;

/*Stylesheet for this stuff*/

* {
  font-family: arial;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 20px;
  text-decoration: none;
  list-style: none;
}

a:visited {
  color: white;
}

a,
#drop {
  color: white;
}

a:hover {
  color: coral;
}

.header-links-container {
  position: relative;
  top: 0;
  background: rgb(63, 83, 95);
  width: 100%;
  height: 80px;
  opacity: .8;
  z-index: 999;
}

.title {
  font-weight: bold;
  font-size: 30px;
  padding: 20px 50px;
  position: relative;
  float: left;
  color: white;
}

.header-links {
  position: relative;
  float: right;
  vertical-align: middle;
}

.nav-links {
  margin: auto;
  padding-top: 20px;
  padding-right: 30px;
}

.nav-link {
  position: relative;
  float: right;
  padding: 0 20px;
  font-size: 23px;
  padding: 5px 10px;
  margin: 5px;
  background: #4471ba;
  border-radius: 7px;
}

.nav-link:hover {
  background: #4480ba;
  color: #d1d1d1;
}

#nav-dropdown {
  display: none;
  margin-top: 42px;
  margin-left: 5px;
  position: absolute;
}

.dropdown-link {
  color: black;
  background-color: #ccc;
  padding: 5px 10px;
}

.dropdown-link:hover {
  color: #000;
  background-color: #a7a7a7;
}

.dropdown-link:active {
  color: white;
  background-color: #3b8cfa;
}

＆＃13;

<div class="header-links-container">
  <h2 class="title">Title</h2>
  <div class="header-links">
    <ul class="nav-links">
      <li class="nav-link"><a href="#">Photo Gallery</a></li>
      <li class="nav-link"><a href="#">SLAP</a></li>
      <li id="drop" class="nav-link"><span>Dropdown</span></li>
      <ul id="nav-dropdown" class="jim">
        <a href="#">
          <li class="dropdown-link">Link 1</li>
        </a>
        <a href="#">
          <li class="dropdown-link">Link 2</li>
        </a>
        <a href="#">
          <li class="dropdown-link">Longer Link</li>
        </a>
        <a href="#">
          <li class="dropdown-link">Vacuum</li>
        </a>
      </ul>

    </ul>
  </div>
</div>
<p>
  Relavent JS lines start at Line 16
</p>

＆＃13;

以下是可能更有意义的小提琴：https://jsfiddle.net/dLw1hu5n/6/

我尝试关闭下一个代码块中的下拉列表，但是当您将鼠标悬停在链接上时，它不会保持打开状态。当鼠标悬停在导航栏div上时，我也尝试关闭菜单，但也没有运气。

我可以解决这个问题吗？还是我需要从方块1开始？

Answer 1

I would prefere to solve this via css。但是，在您的情况下，您可以尝试以下方法：

  function displayDropdown() {
    ul.style.display = "block";

    header.style.borderRadius = "7px 7px 0 0";

    if (links[0].getBoundingClientRect().width > width) {
      links[0].style.borderRadius = "0 7px 0 0";
    }
        open = 1;
  }

  function hideDropdown() {
    ul.style.display = "none";
    header.style.borderRadius = "7px";
    open = 0;
  }

  //Onhover, display the dropdown;
  header.addEventListener("mouseover", function() {
    displayDropdown();
  });

  ul.addEventListener("mouseover", function() {
    displayDropdown();
  });

  //When the mouse leaves the menu, close it.
  ul.addEventListener("mouseleave", function() {
    hideDropdown();
  });

  header.addEventListener("mouseleave", function() {
    hideDropdown();
  });

Answer 2

你的JS很好，但你的mouseleave事件监听器需要在封闭的div上。这样，您的元素将保持打开状态，直到您将鼠标悬停在标题

之外

t.addEventListener("mouseleave", function() {
    ul.style.display = "none";
    header.style.borderRadius = "7px";
    open = 0;
  });

什么是t？ var t = document.getElementById(t);

哪个元素标识为T？试试这个小提琴找出https://jsfiddle.net/dLw1hu5n/12/

Javascript Dropdown保持开放

2 个答案: