如何修复Bulma导航栏navbar-brand区域下拉菜单在小屏幕下的异常展开问题

我之前也碰到过这个问题！本质原因是小屏幕下Bulma的导航栏交互逻辑里，navbar-brand区域的点击事件会冒泡触发汉堡菜单的展开，而你把下拉菜单放在navbar-brand里，点击下拉时就会触发这个默认行为。下面给你两个可行的解决思路：

方案一：阻止下拉菜单的事件冒泡（推荐，不改变原有布局） #

给你的下拉容器添加一个自定义类，然后通过JavaScript阻止点击事件向上冒泡，这样就不会触发汉堡菜单的展开逻辑了。

修改后的HTML代码 #

<nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- LOGO 区域的下拉菜单 -->
    <div class="navbar-item has-dropdown is-hoverable prevent-bubble">
      <a href="/index" class="navbar-link"> MyCompany </a>
      <div class="navbar-dropdown is-boxed">
        <a class="navbar-item" href="/one">One</a>
        <a class="navbar-item" href="/two">Two</a>
        <a class="navbar-item" href="/three">Three</a>
      </div>
    </div>
    <a role="button" class="navbar-burger burger" data-target="topmenu" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="topmenu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/start">Start</a>
    </div>
    <div class="navbar-end">
      <a class="navbar-item" href="/end">End</a>
    </div>
  </div>
</nav>

对应的JavaScript代码 #

// 阻止下拉菜单的点击事件冒泡到navbar-brand
document.querySelectorAll('.prevent-bubble').forEach(element => {
  element.addEventListener('click', function(event) {
    event.stopPropagation();
  });
});

这段代码会监听带有prevent-bubble类的元素的点击事件，阻止事件向上传递，这样点击下拉菜单时就只会触发下拉展开，不会带动整个导航栏展开了。注意要把这段JS放在Bulma的汉堡菜单切换代码之后加载，确保拦截顺序正确。

方案二：调整导航栏结构（适合可以改动布局的场景） #

如果允许调整布局，你可以把下拉菜单从navbar-brand移到navbar-start区域，这样小屏幕下它会被包含在汉堡菜单展开的内容里，自然就不会和品牌区域的点击事件冲突了：

<nav class="topmenu navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- 只保留品牌链接在navbar-brand -->
    <a href="/index" class="navbar-item"> MyCompany </a>
    <a role="button" class="navbar-burger burger" data-target="topmenu" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="topmenu" class="navbar-menu">
    <div class="navbar-start">
      <!-- 下拉菜单移到这里 -->
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link"> Menu </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item" href="/one">One</a>
          <a class="navbar-item" href="/two">Two</a>
          <a class="navbar-item" href="/three">Three</a>
        </div>
      </div>
      <a class="navbar-item" href="/start">Start</a>
    </div>
    <div class="navbar-end">
      <a class="navbar-item" href="/end">End</a>
    </div>
  </div>
</nav>

如果你的需求是必须在品牌区域保留下拉菜单，方案一肯定是更贴合的选择，亲测有效！

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