Как правильно написать if else?

Question

[Roman]

Как сделать что бы по нажатию открывалось меню, используя If else?
Изначально меню имеет width: 0px;, но по нажатию на гамбургер, меняеться размер width: 250px; и оно вылазит с левого края. Ошибка в том, что когда нажимаю на гамбургер, задаеться инлайново блоку width: 0px; и повторное нажатие ничего не меняет.

$(function() {

	var hamburger = $('.hamburger-menu__list').css('width');

	$('.hamburger-toggle').click(function(){
		$(this).toggleClass('open');
		if (hamburger == '0') {
			$('.hamburger-menu__list').css('width', 250);
		} 
		else {
			$('.hamburger-menu__list').css('width', 0);
		}
	});
});

Comments

[Сергей delphinpro]

var hamburger = $('.hamburger-menu__list').css('width').replace(/px/, '');

Answer 1

[rakot]

Жуть то какая. Добавьте класс active, с ним пусть ширина будет 250, а без него 0. Юзайте toggleClass или hasClass addClass removeClass.

Comments

[Roman]

хотел так попробовать, и получилось

$('.hamburger-toggle').click(function(){
    var hamburgerWidth = parseInt($('.hamburger-menu__list').css('width'));

    $(this).toggleClass('open');

    if (hamburgerWidth === 0) {
        $('.hamburger-menu__list').css('width', 250);
    }  else {
        $('.hamburger-menu__list').css('width', 0);
    };
});

Answer 2

[AngReload]

hamburger == '0' || hamburger == '0px'

Comments

[Roman]

меню открывается, но после повторного нажатия, не скрывается

[AngReload]

Roman, сначала не заметил, что у вас переменная hamburger вычисляется только один раз, и становится равной нулю. Чтобы нормально работало надо перетащить её внутрь функции обработчика, как-то так:

$(function() {

  $('.hamburger-toggle').click(function(){
    $(this).toggleClass('open');
     var hamburger = $('.hamburger-menu__list').css('width');
    if (hamburger == '0' || hamburger == '0px') {
      $('.hamburger-menu__list').css('width', 250);
    } 
    else {
      $('.hamburger-menu__list').css('width', 0);
    }
  });
});

Но лучше вообще переписать вот так, что бы понятный код был:

$(function () {
  $('.hamburger-toggle').click(function () {
    var opened = $(this)
      .toggleClass('open')
      .hasClass('open');
    var width = opened ? 250 : 0;
    $('.hamburger-menu__list').css('width', width);
  });
});