如何修复在最小化菜单中不起作用的链接？

Posted 2023-05-08

【中文标题】如何修复在最小化菜单中不起作用的链接？

【英文标题】：How can I fix links that don't work in a minimized menu?

【发布时间】：2022-01-08 12:57:58

【问题描述】：

我有一个非常典型的菜单，其中最上面的项目有孩子，当你翻身时会飞出来。在 992 像素以上工作得很好。低于 992，您应该单击/点击顶部项目以获取弹出窗口。效果很好，您可以在链接预览中获得指针甚至文件名。但是当您单击/点击时，它只会停留在同一页面上并且弹出窗口会折叠。我唯一能找到的是javascript中的以下语句。如果您将其删除，则弹出按钮根本不起作用。如果您删除 && e.preventDefault()，顶部链接会起作用，但不会弹出。

document.addEventListener("click",function(e)
   e.target.closest(".menu-item-has-children") && window.innerWidth <= 992 && e.preventDefault()
)

https://dmvnv.com/2021/

【问题讨论】：

很有趣，我不知道为什么，也许设计是为了在小屏幕上没有弹出窗口（我注意到 _media.scss // Tablets and small desktops $screen-lg-min: 992px; 中提到了 992px）

【参考方案1】：

找到答案了。

preventDefault 会从父代传递给子代（就像让你眼花缭乱的坏基因一样）。

您需要停止传播。在这种情况下，子项是具有子菜单类的第二个无序列表中的列表项。

    $('.sub-menu').on("click", function(e)
        e.preventDefault();
     ).children().click(function(e)  // catch all children click
        e.stopPropagation();
     );

Javascript, Stop preventDefault() to pass to child element