我刚刚接了一些承包工作，其中一部分涉及到使用 jQuery，这是我以前从未使用过的。这看起来相当微不足道，但当有人单击菜单外部时，我无法关闭辅助导航菜单。这是代码:
$(".products-list li").on("click",function(){// for selected product item
$('.products-list li').removeClass('active');
$(this).addClass('active');
});
$("#navigation-menus").on("click",function(){ // for menus close outside click
$('#navigation-menus').removeClass('open');
console.log('The function is being called');
$('.navigation-panel').removeClass('open');
$('.menus-main-list').removeClass('open');
});
$("#menu-product").hover(function (){
$('#navigation-menus').addClass('open');
$('#product-menu-list-2').removeClass('open');
$('#product-menu-list-1').addClass('open');
});
$("#menu-information").hover(function (){
$('#navigation-menus').addClass('open');
$('#product-menu-list-1').removeClass('open');
$('#product-menu-list-2').addClass('open');
});
$(".menus-main-list").hover(function (){
$('.menus-main-list').removeClass('open');
$(this).addClass('open');
});
这是 HTML。顺便说一句，我刚到这里，我还没有写任何东西。我的部分工作就是清理这个问题。有点乱。
<nav id="navigation-menus" class="">
<div class="navigation-panel" id="product-menu-list-1">
<ul>
<li class="menus-main-list menus-blue">
<a href="#">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item"></span>
</a>
<div class="nm-submenus-list">
<ul>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
</ul>
</div>
</li>
<li class="menus-main-list menus-blue">
<a href="#">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item">Services</span>
</a>
<div class="nm-submenus-list">
<ul>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
</ul>
</div>
</li>
<li class="menus-main-list menus-blue">
<a href="#">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item">Education</span>
</a>
<div class="nm-submenus-list">
<ul>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
<li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="navigation-panel" id="product-menu-list-2" style="display:none;">
<ul>
<li class="menus-main-list menus-blue">
<a href="about_us.html">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item">About Us</span>
</a>
</li>
<li class="menus-main-list menus-blue">
<a href="social_media.html">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item">Social Media</span>
</a>
</li>
<li class="menus-main-list menus-blue">
<a href="reviews.html">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item">Reviews</span>
</a>
</li>
<li class="menus-main-list menus-blue">
<a href="community-involvement.html">
<svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>
<span class="test-icon icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>
<span class="test-nav-menu-item">Community Involvement</span>
</a>
</li>
</ul>
</div>
如果您有任何帮助，我将非常感激。
最佳答案
在菜单中添加选项卡索引将使您能够访问 focus 和 focusout 事件，当您单击菜单的外侧时将触发这些事件。然后，您可以在菜单失去焦点时触发一个函数来关闭它。
A negative value (usually tabindex="-1" means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
https://developer.mozilla.org/en-US/docs/Web/Events/focusout
关于javascript - 使用 jQuery 关闭辅助导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45308998/