Wordpress 导航栏，我对 java 脚本有疑问，因为我必须设置自己的导航栏，因为它是自定义主题

Question

我的导航栏有问题。 我似乎无法理解它的逻辑，当我点击它之外的某个地方时，我需要关闭我的导航栏。 我将把我尝试过的和我的 HTML 结构放在下面。 我做了第一个eventlistener ，它只在下一个打开时关闭下拉列表，我似乎无法解决它周围的问题。

 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

您应该在页面内容和菜单之间创建一个覆盖，以捕获在菜单外单击的事件。 这可以通过z-index和添加 HTML 元素来完成。

 $("#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>