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

【问题标题】：How to include side menu content into a custom hamburger icon?如何将侧边菜单内容包含到自定义汉堡图标中？
【发布时间】：2019-03-28 02:21:14
【问题描述】：

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

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

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

</div>

【问题讨论】：

【解决方案1】：

这有点令人困惑，您应该更具体。如果我理解正确，您的问题是单击图标时菜单没有显示？

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

当我们查看开发者 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 用于观察事件是否发生。在这种情况下，单击。如果发生点击，取决于汉堡包是否获得了 'is-active' 类，它会启动关闭或打开导航功能。

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

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

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

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

【讨论】：