Переключить ширину элемента с помощью jQuery

Question

У меня есть гамбургер и меню с левой стороны, в котором есть width: 0px;

Как мне сделать, после того как щелкнуть меню гамбургера изменит ширину на 250px, а второй щелчок изменит ширину на 0px?

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

Answer 1

Вы все еще можете кэшировать element, но каждый раз вызывается ширина доступа click.

Еще одно предложение - использовать ternary-operator, так как это идеальный вариант использования.

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

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

Answer 2

Вам нужно проверять ширину каждый раз, когда вы нажимаете на кнопку, также вам нужно анализировать ширину, чтобы получить правильное число, css('width') возвращает значение с префиксом px, например, 250px, так что parseInt удалитпрефикс и возвращает чистое число, попробуйте это:

$('.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 3

var
    $hamburger = $('.hamburger-menu__list').css('width'),
    $hamburgerToggle = $('.hamburger-toggle'),
    isOpen = false;

function toggleMenu() {
    isOpen = !isOpen;
    $hamburgerToggle.toggleClass('open', isOpen);
    $hamburger.width(isOpen ? 250 : 0);
}

$hamburgerToggle.click(toggleMenu);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вы выполняете DOM-манипуляции.Это плохая практика, потому что она асинхронная.Переменная состояния (isOpen) помогает иметь только один источник состояния (единственный источник правды).

Answer 4

Это будет работать.Вы должны проверять ширину гамбургера каждый раз.

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