javascript - 如何将侧边菜单内容包含到自定义汉堡包图标中？

Question

我设法在我的页面 (www.elevendozen.com) 上从 Codepen 获得了一个动画汉堡包图标，虽然该图标确实具有动画效果，但我无法弄清楚如何将侧边导航菜单内容包含在其中。例如，当点击图标时，菜单不会滑出，反之亦然。

我目前正在使用 WP Mobile Menu 插件，但他们的图标没有动画。你可以帮帮我吗 ？谢谢 !

<div id="mob-menu-left-panel mobmenu" class="mobmenu_content" onclick="closeNav()"

</div>

Answer 1

这有点困惑，你应该更具体一些。如果我理解正确的话，你的问题是当你点击图标时你的菜单没有出现？

在您的 div 中，您有一个 onclick 属性，它应该与名为 closeNav() 和 openNav() 的 javascript 函数配对。这些功能用于管理菜单的滑入/滑出。没有它，就没有机会显示菜单。

当我们查看 developper javascript 控制台时，我们得到这个错误:

Uncaught TypeError: Cannot read property 'style' of null
at openNav ((index):81)
at HTMLButtonElement.<anonymous> ((index):92)

当我们要打开菜单时，还有:

Uncaught TypeError: Cannot read property 'style' of null
at closeNav ((index):86)
at HTMLButtonElement.<anonymous> ((index):92)

当我们尝试关闭菜单时。

如果我们查看索引 92 处的 javascript 文件，它说:

hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());

这里有一个 addEventListener 来监视事件是否发生。在这种情况下，单击。如果发生点击，则取决于汉堡包是否具有“已​​激活”类，它会启动关闭或打开导航功能。

在 closeNav 和 openNav 函数中，菜单通过 :

document.getElementById(".mob-menu-slideout-over.show-nav-left .mob-menu-left-panel").style.display = "none";

我觉得问题就出在这里。 getElementById 函数应该以具有 id 的元素为目标。您的菜单似乎有 navToShow id。您应该在它和 javascript 函数之间建立链接。

但这只是一个建议，并不是一个确定的答案...