使用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

這會奏效。 你必須每次都檢查漢堡包的寬度。

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

每次調用click您仍然可以緩存element但訪問寬度。

另一個建議是使用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

每次單擊按鈕時都需要檢查寬度，還需要解析寬度以獲得正確的數字， css('width')返回前綴為px的值，例如250px因此parseInt將刪除前綴並返回pure數字，試試這個：

$('.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 ）有助於只有一個狀態源（單個事實來源）。