修改CSS菜单：实现点击而非hover时显示子菜单

步骤1：调整CSS样式 #

首先移除原有的hover触发子菜单显示的样式，通过active类来控制子菜单的显示状态：

/* 保持你已设置的子菜单隐藏样式 */
.nav-flyout {
  display: none;
}

/* 添加active类，用于控制子菜单显示 */
.nav-flyout.active {
  display: block;
}

/* 移除原hover触发的样式（如果存在），比如：
.nav-item:hover .nav-flyout {
  display: block;
}
*/

步骤2：编写jQuery点击事件逻辑 #

绑定点击事件到带子项的菜单项，实现子菜单的切换显示，并优化交互体验：

$(document).ready(function() {
  // 点击带子项的菜单项
  $('.has-sub-entries').on('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转（若需跳转可调整逻辑）
    
    var $currentNavItem = $(this).closest('.nav-item');
    var $targetFlyout = $currentNavItem.find('.nav-flyout');
    
    // 切换当前子菜单的显示状态
    $targetFlyout.toggleClass('active');
    
    // 关闭其他已展开的子菜单
    $('.nav-item').not($currentNavItem).find('.nav-flyout').removeClass('active');
  });
  
  // 点击页面空白区域关闭所有子菜单
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.nav-item').length) {
      $('.nav-flyout').removeClass('active');
    }
  });
});

可选调整：支持菜单项跳转 #

如果希望点击已展开的子菜单时触发原a标签的跳转，可以修改点击事件逻辑：

$('.has-sub-entries').on('click', function(e) {
  var $currentNavItem = $(this).closest('.nav-item');
  var $targetFlyout = $currentNavItem.find('.nav-flyout');
  
  // 子菜单已展开则允许跳转，否则阻止跳转并展开子菜单
  if ($targetFlyout.hasClass('active')) {
    return true;
  } else {
    e.preventDefault();
    $targetFlyout.addClass('active');
    $('.nav-item').not($currentNavItem).find('.nav-flyout').removeClass('active');
  }
});

内容的提问来源于stack exchange，提问作者Tom