如图所示，一个网站有一个很大的二级导航，当点击一级导航后，切换到二级页面，二级导航会因为鼠标没有动，还会在原处，导致二级下拉菜单依旧还在，从而让人感觉网页没有切换，特别是小分辨下。

那么这个问题如何解决呢？

我们的解决思路是：

当点击某个栏目切换之后，给这个栏目添加一个：active的属性。

然后通过CSS强制隐藏掉active下面的二级导航。

第三步就是当鼠标离开这个导航之后，又需要去掉：active这个属性，防止再次鼠标滑动上去的时候，二级导航不显示。

所以我们分两步：

第一步：添加CSS

/* 如果当前 nav-item 有 .noshow 类，则强制隐藏 */
.nav-item.noshow .submenu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

第二步：添加JS

<script>    
	document.addEventListener('DOMContentLoaded', function () {    
const navItems = document.querySelectorAll('.navbar-nav .nav-item');    
navItems.forEach(item => {    
const link = item.querySelector('.nav-link');    
if (!link) return;    
// 点击时给当前项加 .noshow    
link.addEventListener('click', () => {    
item.classList.add('noshow');    
});    
// 鼠标移开时移除 .noshow   
item.addEventListener('mouseleave', () => {    
item.classList.remove('noshow');    
});    
});    
});    
</script>

修改成JQ:

/**********PC端导航解决当鼠标点击后隐藏二级分类*************/
$(document).ready(function () {
  $('.navbar-nav .nav-item').each(function () {
    const $item = $(this);
    const $link = $item.find('.nav-link');

    if ($link.length === 0) return;

    // 点击时给当前项加 .noshow
    $link.on('click', function () {
      $item.addClass('noshow');
    });

    // 鼠标移开时移除 .active
    $item.on('mouseleave', function () {
      $item.removeClass('noshow');
    });
  });
});