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

Question

Roman @RomanSocial

Ищу начинающего дизайнера. Верстаю /HTML, CSS, JS/

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

Как сделать что бы по нажатию открывалось меню, используя 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);
		}
	});
});

Вопрос задан более трёх лет назад
316 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Сергей delphinpro @delphinpro Куратор тега CSS
var hamburger = $('.hamburger-menu__list').css('width').replace(/px/, '');
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

Roman @RomanSocial Автор вопроса

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

$('.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);
    };
});

Написано более трёх лет назад

2 комментария

Roman @RomanSocial Автор вопроса

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

Написано более трёх лет назад

AngReload @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);
  });
});

Написано более трёх лет назад

Ваш ответ на вопрос