fix the code to prevent dropdown menu from closing when on click

Question

I got the code from w3scgool and modified it. The dropdown menu opens but when I click inside of it - submenu, then it closes. Here is the pure JavaScript code.

 var dropdown = document.getElementsByClassName('dropdown-btn'); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener('click', function() { this.classList.toggle('active'); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === 'block') { dropdownContent.style.display = 'none'; } else { dropdownContent.style.display = 'block'; } }); }

 nav.side-nav { order: 0; display: flex; flex: 1 1; flex-direction: column; align-self: stretch; margin-bottom: 0.67rem; } nav.side-nav ul { margin: 0; } nav.side-nav li { border-bottom: 1px solid #d9dadc; border-left: 1px solid #d9dadc; border-right: 1px solid #d9dadc; list-style: none; padding: 5px 15px; font-size: 17px; line-height: 24px; } nav.side-nav li:first-child { background: #092a31; color: white; border: none; font-size: 20px; padding: 15px; line-height: 1.1; } nav.side-nav li:not(:first-child):hover { background: #cda600; color: white; cursor: pointer; } /*dropdown menu*/ .dropdown-container { display: none; background-color: #ffffff; padding-left: 8px; }

 <html> <nav class="side-nav"> <ul> <li style="text-align:left;">some1</li> <li href="#">some1</li> <li href="#">some1</li> <li href="#">some1</li> <li id="navDrop" class="dropdown-btn"> <a href="#">Menu</a></li> <div class="dropdown-container"> <form> <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br> <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br> <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br> <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a> </form> </div> <li href="#">Menu</li> </ul> </nav> </html>

I am new to JS. Could someone navigate/show how to edit the code to prevent dropdown from closing when click on its submenu. Update: took out the onclick feature. Took from my code too. Any suggestions about the code because it stays the same. In this case I am using just JS without jquery library.

Answer 1

After making the modifications suggested by @Heretic Monkey and @Ganesh chaitanya, you can simplify your code by using map() instead of a for loop, and again classList.toggle() instead of else if. just modify your css a little with a new class that you add to your div. Like that

 var dropdown = document.getElementsByClassName("dropdown-btn"); // here dropdown.map() don't work, use Array.prototype.map.call(dropdown, function(drop) { drop.addEventListener("click", function() { drop.classList.toggle("active"); var dropdownContent = drop.nextElementSibling; //use classList.toggle with the new class added at the div dropdownContent.classList.toggle("disp-container"); }); });

 nav.side-nav li:not(:first-child):hover { background: #cda600; color: white; cursor: pointer; } /*dropdown menu*/ /*remove display here*/ .dropdown-container { background-color: #ffffff; padding-left: 8px; } /*create a new class and add display here*/ .disp-container { display: none; }

 <nav class="side-nav"> <ul> <li style="text-align:left;">some1</li> <li href="#">some1</li> <li href="#">some1</li> <li href="#">some1</li> <li id="navDrop" class="dropdown-btn"> <a href="#">Menu</a> </li> <!-- add your new class here --> <div class="disp-container dropdown-container"> <form> <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br /> <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br /> <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br /> <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a> </form> </div> <li id="navDrop2" class="dropdown-btn"> <a href="#">Menu</a> </li> <!-- add your new class here --> <div class="disp-container dropdown-container"> <form> <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br /> <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br /> <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br /> <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a> </form> </div> </ul> </nav>

fix the code to prevent dropdown menu from closing when on click

Question

1 answers

solution1
0 ACCPTED 2020-02-08 00:54:03

fix the code to prevent dropdown menu from closing when on click

Question

1 answers

solution1 0 ACCPTED 2020-02-08 00:54:03

solution1
0 ACCPTED 2020-02-08 00:54:03