如何在點擊時更改按鈕的功能？

-1

嘿，我正在嘗試建立一個網站，其中包含一個導航欄，可以在我設法做的頁面上滑動，但打開菜單的按鈕與關閉該菜單的按鈕不同。我希望它打開和關閉它，所以我不需要有多個按鈕。我跟着來構建它的例子是從W3學校：https://www.w3schools.com/howto/howto_js_sidenav.asp 如何在點擊時更改按鈕的功能？

我想用別的if語句，但不知道我該怎麼做...... 一切短的：我想改變功能openNav等有當按鈕沒有被點擊時，與openNav效果相同，點擊時是closeNav。（很抱歉，如果我不能解釋清楚就足夠了）感謝所有答案會來:)

我迄今爲止代碼：

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */ 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
    document.getElementById("main").style.marginLeft = "150px"; 



} 

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft = "0"; 

} 




<div id=main> 
    <div id= button> 
    <span onclick="openNav()"><div id=bar></div> 
<div id=bar></div> 
<div id=bar></div></span></div> 
</div> 

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
</div>

來源

2017-02-19 Simen K

你想你的兩個按鈕和它們的功能組合成一個，我們得到它:) – myfunkyside

**提示：**在if子句中，檢查'width == 0'。如果是這樣，那麼從'openNav（）'做代碼，否則從'closeNav（）'做代碼 – myfunkyside

我會做的是使具有不同的功能一個布爾值來查看它是否當前打開或關閉。

在該函數中，如果關閉，則可以打開;如果打開，則可以關閉;

我不得不提醒你，沒有太多的時間在我的手機這麼快鍵入此：

var open = false; 

function decide(){ 
    if(open == true){ 
    closeNav(); 
    }else{ 
    openNav(); 
    } 
} 

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */ 
function openNav() { 
document.getElementById("mySidenav").style.width = "250px"; 
document.getElementById("main").style.marginLeft = "150px"; 
open = true; 


} 

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */ 
function closeNav() { 
document.getElementById("mySidenav").style.width = "0"; 
document.getElementById("main").style.marginLeft = "0"; 
open = false; 

}

如果你使用這個你只需要一個按鈕。觸發決定（）的按鈕然後調用2個函數中的一個。

來源

2017-02-19 19:25:29

，那麼你最好的東西是這樣的我猜：

function toggleNav() { 
    var d = document; 
    var navWidth = d.getElementById("mySidenav").style.width; 

    if (navWidth === "0" || navWidth === "") { 
     d.getElementById("mySidenav").style.width = "250px"; 
     d.getElementById("main").style.marginLeft = "150px"; 
    } else { 
     d.getElementById("mySidenav").style.width = "0"; 
     d.getElementById("main").style.marginLeft = "0"; 
    } 
}

來源

2017-02-19 19:26:16

聲明一個全局變量，並創建一個新的功能

例如：

var is_nav_open = false; 

    function toggleNav() { 
     if(is_nav_open == false) { 
      is_nav_open = true; 
      openNav(); 
     } else { 
      is_nav_open = false; 
      closeNav(); 
     } 
    }

然後更改

<span onclick="openNav()"><div id=bar></div>

和

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

調用我們的新功能toggleNav（）

像

<span onclick="togglenNav()"><div id=bar></div>

和

<a href="javascript:void(0)" class="closebtn" onclick="togglenNav()">&times;</a>

來源

2017-02-19 19:33:13

如何在點擊時更改按鈕的功能？

回答

相關問題