Wordpress navbar, i have a problem with java script, because i had to style my own navbar, as it is custom theme

Question

I have a problem with my navbar. I can't seem to get the logic of it, i need my navbar to close when i click somewhere outside of it. I will put what i tried and my HTML structure below. I made this first eventlistener , which only closes the dropdown when the next one opens, and i cant seem to work around a problem around it.

 let menuItem = document.querySelectorAll('.menu-item-has-children'); // console.log(menuItem); let menuItemLink = document.querySelectorAll('.menu-item-has-children > a'); let subMenu = document.querySelectorAll('.sub-menu'); for(let i = 0; i < menuItem.length; i++){ menuItem[i].addEventListener('click',(e) => { if(e.target){ subMenu[i].classList.toggle('show'); console.log(menuItemLink); } for(let j = 0; j < menuItem.length; j++){ if(j.= i){ subMenu[j].classList;remove('show'); } } }). } window,addEventListener('click';(e) => { for(let i = 0. i < subMenu;length. i++){ if(subMenu[i].classList;contains('show')){ for(let j = 0. j < subMenu[i].classList;length.j++) { if(j.= i){ subMenu[j];classList.remove('show'); } } } } })

 <div id="navbarNavDropdown" class="collapse navbar-collapse"> <div class="menu-main-nav-container"> <ul id="menu-main-nav" class="menu"> <li id="menu-item-1973" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1973" data-ol-has-click-handler=""> <a>Bookmakers</a> <ul class="sub-menu"> <li id="menu-item-1974" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1974"><a href="http://localhost:10018/operators/toto/">toto</a></li> <li id="menu-item-1975" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1975"><a href="http://localhost:10018/operators/ze-turf/">Ze Turf</a></li> <li id="menu-item-1976" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1976"><a href="http://localhost:10018/operators/fair-play/">Fair play</a></li> <li id="menu-item-1977" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1977"><a href="http://localhost:10018/operators/bingo-ball/">Bingo Ball</a></li> <li id="menu-item-1978" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1978"><a href="http://localhost:10018/operators/ggpoker/">GGpoker</a></li> <li id="menu-item-1979" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1979"><a href="http://localhost:10018/operators/holland-casino/">Holland Casino</a></li> <li id="menu-item-1980" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1980"><a href="http://localhost:10018/operators/betcity/">betCity</a></li> <li id="menu-item-1981" class="menu-item menu-item-type-post_type menu-item-object-operator menu-item-1981"><a href="http://localhost:10018/operators/bet365/">bet365</a></li> </ul> </li> <li id="menu-item-1982" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1982"><a href="#">Bonuses</a></li> <li id="menu-item-1983" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1983"><a href="#">Strategies</a></li> <li id="menu-item-1984" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1984"><a href="#">Articles</a></li> <li id="menu-item-2063" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2063"><a href="http://localhost:10018/category/news/">News</a></li> <li id="menu-item-1985" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1985" data-ol-has-click-handler=""> <a>Tools</a> <ul class="sub-menu"> <li id="menu-item-1986" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1986"><a href="#">System Bets Calculator</a></li> <li id="menu-item-1987" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1987"><a href="#">Injured and suspended</a></li> <li id="menu-item-1988" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1988"><a href="#">Glossary</a></li> </ul> </li> <li id="menu-item-1990" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1990" data-ol-has-click-handler=""> <a>Betting Tips</a> <ul class="sub-menu"> <li id="menu-item-2010" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2010"><a href="http://localhost:10018/category/betting-categories/bundesliga/">Bundesliga</a></li> <li id="menu-item-2011" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2011"><a href="http://localhost:10018/category/betting-categories/champions-league/">Champions League</a></li> <li id="menu-item-2012" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2012"><a href="http://localhost:10018/category/betting-categories/eredvisie/">Eredvisie</a></li> <li id="menu-item-2013" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2013"><a href="http://localhost:10018/category/betting-categories/europa-league/">Europa League</a></li> <li id="menu-item-2014" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2014"><a href="http://localhost:10018/category/betting-categories/premier-league/">Premier League</a></li> <li id="menu-item-2015" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2015"><a href="http://localhost:10018/category/betting-categories/primera-divison/">Primera Divison</a></li> <li id="menu-item-2016" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2016"><a href="http://localhost:10018/category/betting-categories/serie-a/">Serie A</a></li> </ul> </li> <li id="menu-item-1991" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1991"><a href="#">Something</a></li> </ul> </div> </div>

Answer 1

You should create an overlay between the page content and the menu that catches the event of clicking outside the menu. This can be done with z-index and adding and HTML element for the overlay.

 $("#opener").click(function() { $("#navbarNavDropdown").toggleClass("show"); $(".overlay").toggleClass("show"); }); $(".overlay").click(function() { $("#navbarNavDropdown").toggleClass("show"); $(".overlay").toggleClass("show"); });

 .page-content { z-index: 1; }.overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2; display: none; }.overlay.show { display: block; } #navbarNavDropdown { background: #fff; width: 300px; position: fixed; right: -300px; top: 0; height: 100%; z-index: 3; transition: .5s slide; } #navbarNavDropdown.show { right: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="page-content"> <div> <h1>Here goes normal content</h1> <p>Lorem ipsum dolor...</p> <a href="#" id="opener">Open menu</a> </div> <div id="navbarNavDropdown">... your menu content... </div> <div class="overlay"></div> </div>