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

这将起作用。您必须每次检查汉堡包宽度。

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

Answer 2

您仍然可以缓存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 3

每次单击按钮时都需要检查宽度，还需要parseInt宽度以获得正确的数字，px返回带有前缀250px的值，例如{{1} }，因此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 4

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）有助于只有一个状态来源（单个事实来源）。

使用jQuery切换元素宽度

4 个答案: