JavaScript 汉堡按钮不起作用答案

【问题标题】：JavaScript Burger Button not workingJavaScript 汉堡按钮不起作用
【发布时间】：2018-08-28 17:27:56
【问题描述】：

单击汉堡按钮时，我希望“站点导航菜单”出现并占据整个屏幕。目前，当我点击我的汉堡按钮时，没有任何反应，甚至没有控制台日志。但是，如果我将 JS 更改为点击“body”，我的“site-navigation-menu”确实会出现。

<div class="burger" id="burger-6">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>

当我将“.burger”更改为“body”时，js 工作。

$(document).ready(function () {
$(".burger").click(function() { 
    console.log("work plz");
    $(".burger").toggleClass("is-active");
    $(".site-navigation-menu").toggleClass("show");
    $(".line").toggleClass("burgerColor");
    $(".burger").toggleClass("burgerFixed");
});
});

我的汉堡在 header.html 中，我从 index.html 引用如下：

$(function() {
     $("#header").load("header.html");
     $("#footer").load("footer.html");
});

这会导致任何问题吗？

【问题讨论】：

把你的代码放在一个 jsfiddle 中进行演示。
您的页面中是否包含 jquery 库？
我可以看到它不起作用的唯一原因是，当您的文档就绪事件被触发时，如果 .burger 元素不在 DOM 中。之后是通过 ajax 方法或其他事件添加的吗？
我的 .burger 稍后通过媒体查询添加。另外，请参阅我的编辑
在此处发布所有代码以及站点导航菜单示例代码

标签： javascript jquery html css hamburger-menu

【解决方案1】：

关于您的编辑，是的，这绝对是问题所在。内容是动态添加的，所以你应该通过以下方式调用click函数-

$("body").on('click', '.burger',function() { 
  console.log("work plz");
  $(".burger").toggleClass("is-active");
  $(".site-navigation-menu").toggleClass("show");
  $(".line").toggleClass("burgerColor");
  $(".burger").toggleClass("burgerFixed");
});

这将直接引用主体，然后检查动态添加的类。

【讨论】：

我拥有所有这些风格。我也可以发布我所有的汉堡造型吗？
是的，当然。但这也可能是您包含 Jquery 脚本文件的方式。发送到。您通常需要 Jquery 本地和头部的基于云的链接（备份）。