offcanvas菜单链接已损坏 [英] offcanvas menu link broken

问题描述

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

I'm working on a project for school, and I'm having an issue that I hope someone will be able to help with (and possibly curb my festering hatred for joomla, but that's beside the point :)

首先，这里是URL: http://edcc3.cloudaccess.net

First, here's the URL: http://edcc3.cloudaccess.net

问题是，当您调整浏览器大小或使用仿真器查看480px设备上的渲染时，offcanvas菜单链接将不起作用.这意味着它们不会滚动到一页布局中的目标部分，我无法弄清楚原因.我敢打赌这是一个订购问题，但是对于我一生来说，我找不到问题.任何帮助将不胜感激！

The issue is, when you resize the browser or use an emulator to see the rendering on 480px devices, the offcanvas menu links won't work. Meaning they don't scroll to the targetted sections within the one page layout, and I cant figure out why. I'm betting it's an ordering issue but for the life of me I can't find the problem. Any help would be appreciated!

推荐答案

对，我已经为您编写了一个经过测试和运行的小示例:

Right, I've written a small example for you which I've tested and works:

HTML:

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

jQuery:

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

上面的jQuery代码，检测到对菜单项的已定义ID的单击并关闭了offcanvas显示.然后，锚点/滚动将开始.

The above jQuery code, detects a click on the defined ID of the menu item and closes the offcanvas display. The anchor/scroll will then kick in.

请注意，由于这是Joomla，您可能必须对菜单执行模板替代"，而Yootheme已经完成了该操作.

Do note that as this is Joomla, you may have to perform a Template Override for the menu, which Yootheme have already done.

希望这会有所帮助

这篇关于offcanvas菜单链接已损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！