Почему не всегда срабатывает toggleClass?

Question

[Alex Mirgorodskiy]

Всем привет) Нужно сделать мобильную версию меню, ну из обычного в выпадающее превратить, но вот не задачка, почему-то код то срабатывает, то нет, как-то странно, и IE не отрабатывает, не подскажите что не так, в js не силен, по этому обращаюсь к знатокам) вот код

<section id="site_bar_user">
            <div class="burger_box"><img class="burger_menu" src="/web/img/ICO/system/menu.svg" alt="" ></div>
            <ul id="site_bar_nav">
                <li><img src="/web/img/ICO/site_bar/cabinet.svg" alt="cabinet" ><span>Личный кабинет</span></li>
                <li><img src="/web/img/ICO/site_bar/chat.svg" alt="forum" ><span>Форум</span></li>
                <li><img src="/web/img/ICO/site_bar/shopping_bag.svg" alt="shop" ><span>Магазин</span></li>
                <li><img src="/web/img/ICO/site_bar/search.svg" alt="search" ><span>Пробивка</span></li>
            </ul>
        </section>

$(window).on('load resize',function () {

    //Если с планшета
    if ($(window).width() <= '768'){

        //Бургер меню
        $('body').on('click', '.burger_menu',  function () {
            $('#site_bar_nav').toggleClass('site_bar_nav_show');
            
        });

    }

    //Если с ПК
    if ($(window).width() >= '768') {

        //Убрать класс transition 
        $('#site_bar_nav').removeClass('site_bar_nav_show');

    }
});

Ну и css в которых есть класс, который слайдом вытягивает навигацию.

//Навигация
#site_bar_nav {
      width: 100%;
      z-index: 1;
      margin-top: 10%;
      .transition(all,1s,0s);
}

//Показать навигацию
  .site_bar_nav_show {
    top: 100% !important;
    opacity: 1 !important;
  }

Он то добавляет класс, то просто что-то срабатывает но класс не добавляет, ну и IE вообще игнорит нажатие меню. Не подскажите что да как? Не сильно перемудрил?))

Answer 1

[Никита Кит]

1) Разделение планшета и пекарни - это 1023-1024px. Где ты видел ПК с разрешением в 769 пикселей? Упоролся?

2)

$('body').on('click', '.burger_menu', function () {...

Вовсе необязательно декларировать все ивенты через body. Попробуй повесить обработчик непосредственно на бургер

var burger = $('.burger_box')
burger.click(function(){
that = $(this)
that.siblings('#site_bar_nav').toggleClass('site_bar_nav_show')
})

Comments

[Alex Mirgorodskiy]

1)Учту)
2)Код работает, но ничего не поменялось( Сам toggle лагает. То удалить не может, то добавить. В инструменте разработчика мигает что что-то происходит с классом, но он или не удаляется, или не добавляется, IE и этот код не воспринимает.

[Никита Кит]

Что-то извне мешает.
1) Попробуй раставить брэйки в отладчике source твоего devtools и посмотри что происходит.
2) Напиши свой toggle. if has -> remove, else -> add - возможно сработает

[Никита Кит]

Alex Mirgorodskiy, ещё тебе может помочь это
youmightnotneedjquery.com
если у меня не работает на jquery то я пишу на чистом js, если и на нём не работает, то всяко легче найти проблему. Там точно придётся свой toggle писать. Но когда будешь пушить в classList новый класс, проверь его наличие. В этом тебе поможет includes()
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Alex Mirgorodskiy]

Благодарю, занимательно!) Все попробую, отпишусь)