JavaScript 汉堡按钮不起作用

Question

单击汉堡包按钮时，我希望 "site-navigation-menu" 出现并占据整个屏幕。目前，当我点击我的汉堡按钮时没有任何反应，甚至没有控制台日志。但是，如果我将我的 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");
});

这会导致任何问题吗？

Answer 1

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

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

这将直接引用正文，然后检查动态添加的 class。

JavaScript 汉堡按钮不起作用

JavaScript Burger Button not working

html

javascript

css

jquery

hamburger-menu