Question

我刚从W3Schools复制了下拉菜单并更改了他们的班级名称/ ID，因此我可以在我的代码中使用它。

我有两件事：

我做错了什么？
for-loop，for-for是什么？递增1的目的是什么？

HTML：

<body>
    <nav class = "header">
        <div id = "logo"> <a href = "ee"/> </a> </div>
        <ul>
            <li class = "nav_li" id= "cata_li" onclick = "myFunction()">  
            <a class ="nav_a" href="ee"> Find <br/> Poop</a> 
                <ul class = "dropdown_menu">
                    <li> <a href = "#"> Horse poop </a> </li>
                </ul>
            </li>

JavaScript的：

function myFunction() {
    document.getElementById("cata_li").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches(".nav_li")) {
    var dropdowns = document.getElementsByClassName("dropdown_menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

CSS（我相信这里没什么问题，我的CSS看起来仍然一样）：

 .header > ul{
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 250px;
}

.header> ul > li{
    display: inline-block;
    list-style: none;
    vertical-align: top; 
}

.dropdown_menu{
    position: absolute;
    display: none;
    z-index: 40;
    top:50px;
    left:0;
    background-color: #222;
    width: 300px;
    list-style: none;
    padding: 10px;
}

Answer 1

这里有2个问题，在你的nav_a中是一个锚元素，其默认操作是导航到href值，在这里你需要阻止它。

同样matches函数只会检查当前元素，您需要检查点击是否发生在nav_li元素内，所以请改用.closest()

＆＃13;

function myFunction(event) {
  event.preventDefault();
  document.querySelector("#cata_li .dropdown_menu").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.closest(".nav_li")) {
    var dropdowns = document.getElementsByClassName("dropdown_menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

＆＃13;

.header > ul {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 250px;
}
.header> ul > li {
  display: inline-block;
  list-style: none;
  vertical-align: top;
}
.dropdown_menu {
  position: absolute;
  display: none;
  z-index: 40;
  top: 50px;
  left: 0;
  background-color: #222;
  width: 300px;
  list-style: none;
  padding: 10px;
}
.dropdown_menu.show {
  display: block;
}

＆＃13;

<nav class="header">
  <div id="logo">
    <a href="ee"></a>
  </div>
  <ul>
    <li class="nav_li" id="cata_li" onclick="myFunction(event)">
      <a class="nav_a" href="ee"> Find <br/> Poop</a>
      <ul class="dropdown_menu">
        <li> <a href="#"> Horse poop </a> 
        </li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Javascript和HTML - 添加下拉菜单，我在这里做错了什么？

1 个答案: