Can't get this JavaScript to work on my dropdown menu

Question

still working on that Dropdown menu. It's working for the most part, but I need to apply the same effect (closed when it loads, open upon click) to apply to the nested <ul> 's. I've tried a whole bunch of stuff, currently I tried applying the same script to the nested <ul> as I applied to the initial <ul> , but it does nothing. It opens as uncollapsed and does not respond correctly when clicked on. Am I doing something wrong?

Here's my code:

 var dropdown = document.querySelectorAll('.dropdown'); var dropdownArray = Array.prototype.slice.call(dropdown, 0); dropdownArray.forEach(function (el) { var button = el.querySelector('a[data-toggle="dropdown"]'), menu = el.querySelector('.dropdown-menu'), arrow = button.querySelector('i.icon-arrow'); button.onclick = function (event) { if (!menu.hasClass('show')) { menu.classList.add('show'); menu.classList.remove('hide'); arrow.classList.add('open'); arrow.classList.remove('close'); event.preventDefault(); } else { menu.classList.remove('show'); menu.classList.add('hide'); arrow.classList.remove('open'); arrow.classList.add('close'); event.preventDefault(); } }; }); Element.prototype.hasClass = function (className) { return this.className && new RegExp('(^|\\\\s)' + className + '(\\\\s|$)').test(this.className); };

 @charset "utf-8"; body { font-family: "Lato", Helvetica, Arial; font-size: 16px; } .text-center { text-align: center; } *, *:before, *:after { -webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box; } .container { width: 350px; margin: 50px auto; } .container > ul { list-style: none; padding: 0; margin: 0 0 20px 0; } .title { font-family: 'Pacifico'; font-weight: normal; font-size: 40px; text-align: center; line-height: 1.4; color: #2980B9; } .dropdown a { text-decoration: none; } .dropdown [data-toggle="dropdown"] { position: relative; display: block; color: black; background: #E6E6E6; -moz-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset; -webkit-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset; box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); padding: 10px; } .dropdown [data-toggle="dropdown"]:hover { background: #C0C0C0; } .dropdown .icon-arrow { position: absolute; display: block; font-size: 0.7em; color: #fff; top: 14px; right: 10px; } .dropdown .icon-arrow.open { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow.close { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow:before { content: '\\25BC'; } .dropdown .dropdown-menu { max-height: 0; overflow: hidden; list-style: none; padding: 0; margin: 0; } .dropdown .dropdown-menu li { padding: 0; } .dropdown .dropdown-menu li a { display: block; color: #6e6e6e; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 10px 10px; } .dropdown .dropdown-menu li a:hover { background: #f6f6f6; } .dropdown .dropdown-menu li ul li { display: block; color: #6e6e6e; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 0px 0px; text-decoration:none; font-size:80%; } .dropdown .dropdown-menu li ul li a{ display: block; color: #6e6e6e; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 10px 10px; text-decoration:none; } .dropdown .dropdown-menu li ul li a:hover { background: #f6f6f6; } .dropdown .show, .dropdown .hide { -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .dropdown .show { display: block; max-height: 9999px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); animation: showAnimation 0.5s ease-in-out; -moz-animation: showAnimation 0.5s ease-in-out; -webkit-animation: showAnimation 0.5s ease-in-out; -moz-transition: max-height 1s ease-in-out; -o-transition: max-height 1s ease-in-out; -webkit-transition: max-height 1s ease-in-out; transition: max-height 1s ease-in-out; } .dropdown .hide { max-height: 0; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); animation: hideAnimation 0.4s ease-out; -moz-animation: hideAnimation 0.4s ease-out; -webkit-animation: hideAnimation 0.4s ease-out; -moz-transition: max-height 0.6s ease-out; -o-transition: max-height 0.6s ease-out; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; } @keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-moz-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-moz-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } }

 <!DOCTYPE html><html class=""> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="dropstyle.css"/> </head> <body> <div class="container"> <h1 class="title">Dropdown Menu</h1> <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown">Ga naar... <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#" data-toggle="dropdown">Webdesign</a> <ul> <li><a href="http://www.breunesse-ict.nl/web-design/eigen-website/">Website</a></li> <li><a href="http://www.breunesse-ict.nl/cms/">CMS</a></li> <li><a href="http://www.breunesse-ict.nl/portfolio/">Portfolio</a></li> </ul> </li> <li><a href="#" data-toggle="dropdown">Verkoop</a> <ul> <li><a href="http://www.breunesse-ict.nl/verkoop/computer-laptops">Computers & laptops</a></li> <li><a href="http://www.breunesse-ict.nl/verkoop/bullguard-virusscanner-backup">Bullguard anti-virus & backup</a></li> </ul> </li> <li><a href="http://www.breunesse-ict.nl/reparatie/">Reparatie</a></li> <li><a href="#" data-toggle="dropdown">Google diensten</a> <ul> <li><a href="http://www.breunesse-ict.nl/google-diensten/adwords">Adwords</a></li> <li><a href="http://www.breunesse-ict.nl/google-diensten/drive">Drive</a></li> </ul> </li> <li><a href="#" data-toggle="dropdown">Glasvezel</a> <ul> <li><a href="http://www.breunesse-ict.nl/glasvezel-baarn/introductie">Introductie</a></li> <li><a href="http://www.breunesse-ict.nl/glasvezel-baarn/waarom">Waarom</a></li> <li><a href="http://www.breunesse-ict.nl/glasvezel-baarn/techniek">Techniek</a></li> <li><a href="http://www.breunesse-ict.nl/glasvezel-baarn/aanmelden">Aanmelden</a></li> </ul> </li> <li><a href="http://www.breunesse-ict.nl/nieuws-overzicht/">Nieuws</a></li> <li><a href="http://www.breunesse-ict.nl/contact/">Contact</a></li> </ul> </li> </ul> </div> <script src="dropscript.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </body></html>

Answer 1

Try adding the dropdown , dropdown-menu classes to the sub dropdown structures too, and also include the arrow there too. It seems like it's missing. So now this is happening:

• You get only the first li in the beginning.
• You query only the first a in it, and only the first ul .
• Thus you handle the clicks and dropdowns only at first level.

Here is your updated fiddle: http://jsfiddle.net/gdna2ncq/1/