Bootstrap 3导航栏下拉菜单：已有下拉展开时hover触发需求

直接上适配Svelte的完整实现代码，满足你要求的「默认点击展开、任意菜单展开时所有菜单支持hover触发」的交互逻辑：

<script>
  import { onMount, onDestroy } from 'svelte';

  let hasOpenDropdown = false;
  let dropdownElements = [];

  onMount(() => {
    // 监听Bootstrap下拉菜单的展开/收起事件，更新全局状态
    $(document).on('show.bs.dropdown', () => {
      hasOpenDropdown = true;
    });

    $(document).on('hide.bs.dropdown', () => {
      // 检查是否还有其他已展开的下拉菜单
      hasOpenDropdown = $('.dropdown.open').length > 0;
    });

    // 处理hover事件的逻辑
    const handleDropdownHover = (event) => {
      if (!hasOpenDropdown) return;
      
      const $dropdown = $(event.currentTarget);
      const toggle = $dropdown.find('.dropdown-toggle');

      if (event.type === 'mouseenter') {
        toggle.dropdown('show');
      } else {
        // 仅关闭非当前主动展开的菜单，保留点击关闭的逻辑
        if (!$dropdown.hasClass('open')) return;
        toggle.dropdown('hide');
      }
    };

    // 给所有下拉菜单绑定hover事件
    dropdownElements.forEach(el => {
      el.addEventListener('mouseenter', handleDropdownHover);
      el.addEventListener('mouseleave', handleDropdownHover);
    });

    // 组件销毁时清理事件监听
    return () => {
      $(document).off('show.bs.dropdown hide.bs.dropdown');
      dropdownElements.forEach(el => {
        el.removeEventListener('mouseenter', handleDropdownHover);
        el.removeEventListener('mouseleave', handleDropdownHover);
      });
    };
  });
</script>

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="dropdown" bind:this={dropdownElements[0]}>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown 1 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action 1</a></li>
          <li><a href="#">Another action 1</a></li>
        </ul>
      </li>
      <li class="dropdown" bind:this={dropdownElements[1]}>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown 2 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action 2</a></li>
          <li><a href="#">Another action 2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<style>
  /* 强制hover时显示下拉菜单，覆盖Bootstrap默认样式 */
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
  }

  /* 同步hover时触发按钮的样式，保持视觉一致性 */
  .navbar-nav .dropdown:hover .dropdown-toggle {
    background-color: #e7e7e7;
    color: #555;
  }
</style>

关键逻辑说明 #

1. 全局状态跟踪：通过hasOpenDropdown变量记录当前是否有下拉菜单处于展开状态，利用Bootstrap原生的show.bs.dropdown和hide.bs.dropdown事件更新状态。
2. Hover事件控制：只有当存在展开的菜单时，hover事件才会触发下拉菜单的显示/隐藏；离开hover时，仅关闭非当前主动点击展开的菜单，保留原有点击关闭的交互逻辑。
3. Svelte生命周期适配：在onMount中绑定事件，onDestroy中清理事件监听，避免内存泄漏；通过bind:this获取所有下拉菜单DOM元素。
4. CSS样式补充：Bootstrap默认不支持hover触发下拉，所以添加自定义CSS确保hover时菜单正常显示，并同步触发按钮的样式。

注意事项 #

• 确保项目中已正确引入jQuery和Bootstrap 3的CSS/JS文件。
• 若新增下拉菜单，只需将对应的<li class="dropdown">元素绑定到dropdownElements数组即可，逻辑会自动适配。
• 测试场景：点击任意菜单展开后，hover其他菜单会自动展开；点击页面空白处关闭所有菜单后，回到默认点击触发逻辑。

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