Javascript and HTML - Adding a dropdown menu, what am I doing wrong here?

Question

I just copied the dropdown menu from W3Schools and changed their class names/id's so I can use it in my code.

I have two things:

What am I doing wrong?
What does the for-loop, not for-in, do? What is the purpose of incrementing by one?

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 (I am sure nothing is wrong here, my CSS still looks the same):

 .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

There are 2 issues here, In your nav_a is an anchor element whose default action is to navigate to the href value, here you need to prevent it.

Also the matches function will just check for the current element, you need to check whether the click has happened inside a nav_li element so use .closest() instead

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

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

 <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>

Javascript and HTML - Adding a dropdown menu, what am I doing wrong here?

Question

1 answers

solution1
0 2016-03-20 05:19:30

Javascript and HTML - Adding a dropdown menu, what am I doing wrong here?

Question

1 answers

solution1 0 2016-03-20 05:19:30

solution1
0 2016-03-20 05:19:30