Rails 7 和 Turbo 中的菜单“闪烁”

Question

我正在尝试使用 Rails 7、Bootstrap 5 和 Jquery 构建一个非常简单的带有子菜单的菜单。

HTML：

   <div>
    <button class="toggle-submenu">Sales</button>
    <div class="submenu">
      <ul>
        <li><a href="/sales/recent">Recent</a></li>
        <li><a href="/sales">All</a></li>
      </ul>
    </div>
  </div>
  <div>
    <button class="toggle-submenu">Products</button>
    <div class="submenu">
      <ul>
        <li><a href="/products">All</a></li>
      </ul>
    </div>
  </div>

CSS：

.submenu {
  height: 0;
  overflow: hidden;
}

.submenu-open {
  height: auto;
}

JS：

$(document).on('click', '.toggle-submenu', function() {
    $(this).parent().find('.submenu').toggleClass('submenu-open');
    $('.submenu').not($(this).parent().find('.submenu')).removeClass('submenu-open');
});

因此，这一切所做的就是单击按钮时，将“submenu-open”类添加到最接近的“子菜单”div 并将其从所有其他 div 中删除。

但是发生的情况是，当单击子菜单内的一个链接时，它会闪烁另一个子菜单，直到服务器响应（为了测试，我向控制器添加了 sleep 3，然后“闪烁”持续了 3 秒）。请参阅下面的 GIF：

在 GIF 中，我单击产品内的所有链接，然后会打开销售子菜单。

禁用涡轮增压后，问题就会消失。有人有解决办法吗？

Answer 1

这里的一个问题是，无论 Turbolinks 是否存在，您都不会阻止默认操作，也不会阻止事件传播。如果 Turbolinks 处理程序没有触发，实际上会更令人惊讶。

将事件处理程序附加到具有默认行为的元素（例如链接、按钮和表单）时，这是您始终必须执行的操作。

$(document).on('click', '.toggle-submenu', function(event) {
    event.preventDefault();
    event.stopPropogation();
    $(this).parent().find('.submenu').toggleClass('submenu-open');
    $('.submenu').not($(this).parent().find('.submenu')).removeClass('submenu-open');
});