如何使用Javascript进行下拉切换？

Question

I am currently coding my very first sidebar with toggle function for submenues. I tried to use W3schools tut but I just can't get it running. When i click the buttons within the sidebar the submenues won't appear.

The console here tells me that "toogle" is undefined. I guess something is wrong with the javascript code.

Thank you very much in advance for your help.

 //* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document.getElementsByClassName("button"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.subbar.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } 

 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /************************************Main code*********************************************/ /* Landing Page */ body { background-image: image(); } img { width: 100%; } .header { position: relative; text-align: center; color: red; } .dasocc { text-align: center; font-size: 65px; position: absolute; top: 50%; left: 50%; color: white; font-family: 'Varela Round', sans-serif; transform: translate(-50%, -50%); } body { overflow-x: hidden; font-family: 'Roboto', sans-serif; font-size: 16px; } /* Dashboard */ /* Toggle Styles */ #viewport { padding-left: 250px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #content { width: 100%; position: relative; margin-right: 0; } /* Sidebar Styles */ #sidebar { z-index: 1000; position: fixed; left: 250px; width: 180px; height: 100%; margin-left: -250px; overflow-y: auto; background: #5BB281; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar header { background-color: #5BB281; font-size: 35px; font-family: roboto; sans-serif; font-weight: bold; line-height: 52px; text-align: center; margin-bottom: 50px; } #sidebar header a { color: #fff; display: block; text-decoration: none; } #sidebar header a:hover { color: #FFF; } #sidebar .nav a{ background: none; color: #FFF; font-size: 14px; padding-left: 25px; padding-top: 10px; text-decoration: none; z-index: -1; } #sidebar .nav img{ height: 11px; width: 11px; padding-right: 10px; padding-left: 10px; } #sidebar .nav li{ padding-top: 10px; } #sidebar .nav a:hover{ background: none; color: #8A0094; } #subbar .team { font-size: 10px; font-family: roboto; sans-serif; padding-left: 50px; } #subbar { display: none } .button { padding: 6px 8px 6px 16px; text-decoration: none; color: #FFF; font-size: 15px; display: block; border: none; background: none; width:100%; text-align: left; cursor: pointer; outline: none; padding-left: 15px; } .button:hover { color: #8A0094; } 

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <script src="index.js"></script> <title>dasocc</title> </head> <body> <div id="viewport"> <!-- Sidebar --> <div id="sidebar"> <header> <a href="#">dasocc</a> </header> <ul class="nav"> <button class="button"><img src="images/germany.png">1. Bundesliga</button> <div id="subbar"> <li> <a class="team">FC Bayern München</a> </li> <li> <a class="team">Borussia Dortmund</a> </li> <li> <a class="team">Bayer Leverkusen</a> </li> <li> <a class="team">RB Leipzig</a> </li> <li> <a class="team">VfL Wolfsburg</a> </li> <li> <a class="team">SC Freiburg</a> </li> <li> <a class="team">Eintracht Frankfurt</a> </li> <li> <a class="team">Borussia M. Gladbach</a> </li> <li> <a class="team">FC Schalke 04</a> </li> <li> <a class="team">TSG Hoffenheim</a> </li> <li> <a class="team">1. FC Union Berlin</a> </li> <li> <a class="team">Fortuna Düsseldorf</a> </li> <li> <a class="team">Werder Bremen</a> </li> <li> <a class="team">1. FC Köln</a> </li> <li> <a class="team">SC Paderborn</a> </li> <li> <a class="team">FC Augsburg</a> </li> <li> <a class="team">Hertha BSC Berlin</a> </li> </div> <li> <button class="button"><img src="images/england.png" alt="">Premier League</button> </li> <div id="subbar"> <li> <a class="team">FC Bayern München</a> </li> <li> </div> <li> <button class="button"><img src="images/france.png" alt="">Ligue One</button> </li> <div id="subbar"> <li> <a class="team">FC Bayern München</a> </li> <li> </div> <li> <button class="button"><img src="images/spain.png" alt="">La Liga</button> </li> <div id="subbar"> <li> <a class="team">FC Bayern München</a> </li> <li> </div> <li> <button class="button"><img src="images/italy.png">Serie A</button> </li> <div id="subbar"> <li> <a class="team">FC Bayern München</a> </li> </ul> </div> <!-- Content --> </body> </html> 

Answer 1

Couln't solve it via js but instead found a css hover work-around.

Nevertheless thank you for yor input. Helped me a lot to improve my understanding.