提问人：almo 提问时间：11/4/2023 更新时间：11/6/2023 访问量：43
菜单在 Rails 7 和 Turbo 中“闪烁”
Menu "flashes" in Rails 7 and Turbo
问：
我正在尝试使用 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;
}
WSG集团
$(document).on('click', '.toggle-submenu', function() {
$(this).parent().find('.submenu').toggleClass('submenu-open');
$('.submenu').not($(this).parent().find('.submenu')).removeClass('submenu-open');
});
因此，所有这一切都是在单击按钮时，将“submenu-open”类添加到最接近的“submenu”div 中，并将其从所有其他类中删除。
但是发生的情况是，当单击子菜单中的一个链接时，它会闪烁另一个子菜单，直到服务器响应（为了测试，我在我的控制器上添加了一个睡眠 3，然后“闪烁”持续了 3 秒）。请参阅下面的 GIF：
在GIF中，我单击产品中的所有链接，并在短时间内打开销售子菜单。
禁用涡轮增压器后，问题消失。有人对此有解决方案吗？
答：
1赞
max
11/6/2023
#1
您不会阻止默认操作，也不会阻止事件传播。如果 Turbo 处理程序没有触发并替换页面，实际上会更令人不安。
在将事件处理程序附加到具有默认行为的元素（如链接、按钮和窗体）时，始终必须执行此操作。
$(document).on('click', '.toggle-submenu', function(event) {
let active = $(this).parent().find('.submenu');
event.preventDefault();
event.stopPropogation();
active.toggleClass('submenu-open');
$('.submenu').not(active).removeClass('submenu-open');
});
使用 jQuery，您还可以通过从事件处理程序返回 false 来执行这两个操作。
评论
0赞
max
11/6/2023
我也不太明白你认为这应该如何工作。如果你想让这个菜单实际加载页面并保持其状态，你需要花更多的心思。
0赞
almo
11/8/2023
谢谢你的回答。我把这个例子分解为显示问题的基础知识。当然，使菜单持久化是另一个步骤。
评论