javascript - JavaScript Burger Button不起作用

在单击汉堡按钮时，我希望出现“站点导航菜单”并占据整个屏幕。现在，当我单击汉堡按钮时，什么都没有发生，甚至没有控制台日志。但是，如果我更改我的JS以单击“正文”时说，我的“站点导航菜单”就会出现。

<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");
});

这会引起任何问题吗？

最佳答案

关于您的编辑，是的，绝对是问题所在。内容是动态添加的，因此您应通过以下方式调用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");
});

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

关于javascript - JavaScript Burger Button不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52053869/