Почему дублируется функция в js?

Question

[Anarchy]

https://jsfiddle.net/Vampire/gn34feLh/2/ При ресайзе окна и клике на кнопку меню начинает открываться и закрываться много-много раз) Если страницу сразу открывать на маленьком экране, то всё работает как надо. То есть проблема именно в ресайзе. Вопрос возможно тупой, но чего-то даже stackoverflow не помог. Не могу понять почему идет несколько срабатываний.

Comments

[Beliyadm]

Потому что функция меню slideToggle у вас висит на каждом срабатывании resize, которых происходит очень много при изменении до 768px

[Anarchy]

Beliyadm, всё разобрался https://jsfiddle.net/Vampire/gn34feLh/10/

[Beliyadm]

Правильно понимаю, что нужно - если окно больше 768 - то должен быть slideToggle, если меньше - то slideDown?
Зачем слушать каждое событие ресайза, вот все проще и работает. Большое окно - туда сюда, маленькое только туда )

$('.js_open_footer_menu').on('click',function () {
		var windowWidth = $(window).width();
		if (windowWidth > '768') {
			$(this).next('ul').slideToggle();
			$(this).toggleClass('active');
		} else {
				$('.js_open_footer_menu').next('ul').slideDown();
		}
	});

[Anarchy]

Beliyadm, оставьте какой-нибудь ответ на вопрос, чтобы я отметил его как решение) А то комментарий нельзя отмечать решением задачи.

Answer 1

[Beliyadm]

Правильно понимаю, что нужно - если окно больше 768 - то должен быть slideToggle, если меньше - то slideDown?
Зачем слушать каждое событие ресайза, вот все проще и работает, слушаем только событие клик. Большое окно - туда сюда, маленькое только туда )

$('.js_open_footer_menu').on('click',function () {
    var windowWidth = $(window).width();
    if (windowWidth > '768') {
      $(this).next('ul').slideToggle();
      $(this).toggleClass('active');
    } else {
        $('.js_open_footer_menu').next('ul').slideDown();
    }
  });

P.S. виноват, протупил что у вас условие на меньше, но не суть