Question

单击汉堡按钮时，我希望出现“站点导航菜单”并占据整个屏幕。现在，当我单击汉堡按钮时，什么都没有发生，甚至没有控制台日志。但是，如果更改我的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

关于您的编辑，是的，肯定是问题所在。内容是动态添加的，因此您应该通过以下方式调用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 Burger Button不起作用

1 个答案: