Кнопка JavaScript Burger не работает - PullRequest
Новая
       13

Кнопка JavaScript Burger не работает

0 голосов
/ 28 августа 2018

При нажатии кнопки бургера я хочу, чтобы "site-navigation-menu" появлялось и занимало весь экран. На данный момент ничего не происходит, когда я нажимаю на кнопку с гамбургером, даже журнал консоли. Однако, если я изменю свой JS, чтобы сказать по щелчку «тело», мое «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");
});

Может ли это вызывать какие-либо проблемы?

1 Ответ

0 голосов
/ 28 августа 2018

Что касается вашего редактирования, да, это определенно проблема Содержимое добавляется динамически, поэтому вы должны вызывать функцию щелчка следующим образом - 

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

Это будет напрямую ссылаться на тело, а затем проверять наличие динамически добавленного класса.

...