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

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

CodePudding user response：

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.

function toggleMenu() {
  var menu = document.getElementById('navbarNavDropdown');
   if(menu.classList.contains('show')){
    menu.classList.remove('show')
   }else{
   menu.classList.add('show');
   }
   
  var overlay = document.getElementById('overlay');
   if(overlay.classList.contains('show')){
    overlay.classList.remove('show')
   }else{
   overlay.classList.add('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;
}

<div >
  <div>
    <h1>Here goes normal content</h1>
    <p>Lorem ipsum dolor...</p>
    <a href="#" id="opener" onclick="toggleMenu()">Open menu</a>
  </div>
  <div id="navbarNavDropdown"> ... your menu content ... </div>
  <div id="overlay"  onclick="toggleMenu()"></div>
</div>