如何使這個使用相同的按鈕打開和關閉

-2

function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
}

我想要實現的是不是像兩個按鈕;

<a href="#" onclick="openNav()">Open</a> 

<a href="#" onclick="closeNav()">Close</a>

是否有一個按鈕同時執行兩種操作，如第一次點擊打開側欄和第二次單擊側欄時關閉。

來源

2016-08-18 Lewis Day

檢查風格寬度大於0，如果是，開放的。否則，關閉。 – Derek

您是否知道if else語句？如果不。我會強烈建議你至少學習Javascript核心Javascript – bugwheels94

@ user1533609我剛接觸javascript，然後被困在這裏 –

然後有一個按鈕：

<a href="#" onclick="toggleNav()">Toggle</a>

而且在功能確定要採取的行動：

function toggleNav() { 
    var element = document.getElementById("mySidenav"); 
    if (element.style.width == "250px") { 
     element.style.width = "0px"; 
    } else { 
     element.style.width = "250px"; 
    } 
}

來源

2016-08-18 16:55:04 David

使用三元語句可以使它更短：element.style.width = element.style.width ==「250px」？「0px」：「250px」; – MCMXCII

僅使用一個按鈕和OP的功能：

<a href='#' onclick=" \ 
    if (document.getElementById("mySidenav").style.width == "250px") { \ 
     closeNav(); \ 
    } else { \ 
     openNav(); \ 
    } \ 
">Toggle</a>

這將有一個按鈕標記爲切換，並在點擊時調用OP的功能。反斜槓用於轉義換行符結束

來源

2016-08-18 17:00:08

這必須工作：

function toggleNav() { 
 
    var elem = document.getElementById('mySidenav'); 
 
    
 
    elem.setAttribute('style', (elem.clientWidth == 250) ? 'width: 0' : 'width: 250px'); 
 
}

來源

2016-08-18 17:14:58

如何使這個使用相同的按鈕打開和關閉

回答

相關問題