画布菜单链接断开答案

【问题标题】：offcanvas menu link broken画布菜单链接断开
【发布时间】：2014-10-13 22:23:03
【问题描述】：

我正在为学校做一个项目，我遇到了一个问题，我希望有人能够帮助解决（并可能遏制我对 joomla 的仇恨，但这不是重点 :)

问题是，当您调整浏览器大小或使用模拟器在 480 像素设备上查看渲染时，offcanvas 菜单链接将不起作用。这意味着他们不会滚动到单页布局中的目标部分，我不知道为什么。我打赌这是一个订购问题，但对于我的生活，我找不到问题。任何帮助将不胜感激！

【问题讨论】：

你是使用菜单扩展还是核心菜单，还是模板有一些自定义的js？ html看起来不错。为什么你认为这是一个订购问题？
正如@Elin 所说，HTML 标记很好。有一个锚点，但这是 UIKit 的画布菜单的默认操作。您可能需要编写一个小的自定义脚本来关闭 offcanvas 菜单并在单击时向下导航到指定的元素。
@Elin 我认为可能是 offcanvas 代码位于标记的底部，也许正因为如此，它无法“看到”我的锚标签，因为.....层次结构....巫毒:)

【解决方案1】：

好的，我已经为你写了一个小例子，我已经测试过并且可以工作了：

HTML：

<a id="test" href="#test" data-uk-smooth-scroll="">Item</a>

jQuery：

$('#test').on('click', function() { 
    $.UIkit.offcanvas.hide();
});

上面的 jQuery 代码，检测到对定义的菜单项 ID 的点击并关闭画布显示。然后锚/滚动将启动。

请注意，由于这是 Joomla，您可能需要为菜单执行模板覆盖，Yootheme 已经这样做了。

希望对你有帮助

【讨论】：