时间戳

首页 > 解决方案 > JavaScript 汉堡按钮不起作用

javascript - JavaScript 汉堡按钮不起作用

问题描述

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

这会导致任何问题吗？

标签： javascriptjqueryhtmlcsshamburger-menu

解决方案

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

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

推荐阅读