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

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

javascript html css

Javascript和HTML-添加下拉菜单，我在这里做错了什么？,javascript,html,css,Javascript,Html,Css,我只是复制了W3Schools的下拉菜单，并更改了它们的类名/id，以便在代码中使用它我有两件事：我做错了什么 for循环（而不是for in）的作用是什么？增加1的目的是什么 HTML: 这里有两个问题，在您的nav_中，a是一个锚元素，其默认操作是导航到href值，在这里您需要防止它另外，matches功能只会检查当前元素，您需要检查单击是否发生在nav_li元素中，因此请改用函数myFunction（事件）{ event.preventDefault（）； document.qu

我只是复制了W3Schools的下拉菜单，并更改了它们的类名/id，以便在代码中使用它

我有两件事：

我做错了什么

for循环（而不是for in）的作用是什么？增加1的目的是什么

HTML:

这里有两个问题，在您的

nav_中，a

是一个锚元素，其默认操作是导航到href值，在这里您需要防止它

另外，

matches

功能只会检查当前元素，您需要检查单击是否发生在

nav_li

元素中，因此请改用

函数myFunction（事件）{
event.preventDefault（）；
document.querySelector（“cata#u li.dropdown_menu”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.closest（“.nav_li”））{
var dropdowns=document.getElementsByClassName（“下拉菜单”）；
var i；
对于（i=0；i


.header>ul{
显示：内联块；
位置：绝对位置；
顶部：0px；
左：250px；
}
.header>ul>li{
显示：内联块；
列表样式：无；
垂直对齐：顶部；
}
.下拉菜单{
位置：绝对位置；
显示：无；
z指数：40；
顶部：50px；
左：0；
背景色：#222；
宽度：300px；
列表样式：无；
填充：10px；
}
.下拉菜单_menu.show{
显示：块；
}









非常感谢你！但是你介意告诉我for循环的用途吗？我不明白它的目的
<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> 

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');
      }
    }
  }
}

 .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;
}