Bootstrap 3导航栏延迟弹出菜单异常：点击失效、无法收起求助

我看到你在实现Bootstrap 3导航栏的延迟悬停菜单时遇到了两个头疼的问题：点击页面其他区域菜单收不回去，而且菜单显示后主链接点了也跳不了。咱们来一步步解决这两个问题，先分析原代码的问题，再给出完整的解决方案。

原代码的核心问题 #

你原来的hover事件处理有几个不足：

1. 只处理了鼠标进入的延迟触发，但没处理鼠标离开时取消定时器，也没手动关闭菜单；
2. 使用Bootstrap自带的dropdown('toggle')方法会拦截主链接的点击事件，导致跳转失效；
3. 没有监听页面其他区域的点击，来自动关闭打开的菜单。

完整解决方案 #

下面是调整后的代码，完全满足你的需求：点击主链接正常跳转，悬停1秒显示菜单，点击外部自动收起菜单。

HTML结构（确保主链接有合法href） #

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <!-- 主链接保留href，用于跳转 -->
          <a id="btnJobs" href="/jobs" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
            Jobs <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="/jobs/full-time">Full Time</a></li>
            <li><a href="/jobs/part-time">Part Time</a></li>
            <li><a href="/jobs/remote">Remote</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

JavaScript逻辑（关键部分） #

$(document).ready(function() {
  // 存储延迟定时器的ID，用于后续清除
  var hoverTimeout;
  // 缓存DOM元素，避免重复查找
  var $jobsBtn = $('#btnJobs');
  var $jobsDropdown = $jobsBtn.siblings('.dropdown-menu');

  // 鼠标进入父元素（包含按钮和菜单）时，延迟打开菜单
  $jobsBtn.parent().on('mouseenter', function() {
    hoverTimeout = setTimeout(function() {
      $jobsDropdown.addClass('open');
      $jobsBtn.attr('aria-expanded', 'true'); // 更新ARIA属性，保证可访问性
    }, 800);
  });

  // 鼠标离开父元素时，清除定时器并关闭菜单
  $jobsBtn.parent().on('mouseleave', function() {
    clearTimeout(hoverTimeout);
    $jobsDropdown.removeClass('open');
    $jobsBtn.attr('aria-expanded', 'false');
  });

  // 处理主链接点击：如果菜单已打开，关闭它并不跳转；否则允许正常跳转
  $jobsBtn.on('click', function(e) {
    if ($jobsDropdown.hasClass('open')) {
      e.preventDefault(); // 阻止跳转
      $jobsDropdown.removeClass('open');
      $jobsBtn.attr('aria-expanded', 'false');
    }
    // 菜单未打开时，默认跳转行为会自动执行
  });

  // 点击页面其他区域时关闭菜单
  $(document).on('click', function(e) {
    // 判断点击目标是否不在按钮或菜单范围内
    if (!$jobsBtn.is(e.target) && !$jobsBtn.has(e.target).length && 
        !$jobsDropdown.is(e.target) && !$jobsDropdown.has(e.target).length) {
      $jobsDropdown.removeClass('open');
      $jobsBtn.attr('aria-expanded', 'false');
    }
  });
});

可选CSS（优化显示体验） #

/* 确保菜单默认隐藏，避免初始加载时的闪烁 */
.dropdown-menu {
  display: none;
}
/* 菜单打开时显示 */
.dropdown-menu.open {
  display: block;
}

关键逻辑说明 #

1. 延迟悬停处理：在父元素（li.dropdown）上监听mouseenter和mouseleave，这样鼠标移到菜单上也不会关闭；用setTimeout实现延迟，离开时立即清除定时器。
2. 主链接跳转修复：不再使用Bootstrap的dropdown('toggle')（它会拦截点击事件），而是手动添加/移除open类；点击时判断菜单状态，只有菜单打开时才阻止跳转。
3. 点击外部关闭：监听document的点击事件，判断点击区域是否在按钮或菜单外，是的话就关闭菜单。

这样调整后，你的两个问题就都解决啦～

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