用jQuery关闭辅助导航菜单
问题描述：
我只是承担了一些承包工作，其中一部分涉及使用jQuery，这是我以前从未使用过的。这看起来很琐碎，但是当有人在菜单之外点击时，我还无法让我们的辅助导航菜单关闭。这里是代码：用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事件，当您单击菜单的一侧时，将触发这些事件。然后您可以在菜单失去焦点关闭它时触发一个功能。
负值（通常的tabindex =“ - 1”是指该元件应是可聚焦的，但不应该是通过顺序键盘导航晴有用使用JavaScript创建访问窗口小部件
可达。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
https://developer.mozilla.org/en-US/docs/Web/Events/focusout
需要更多的信息。什么是CSS于应用类？（开放的，活跃的） –
做一个片段与您的代码 –