打開/關閉sidenav酒吧同樣的按鈕

我有一個按鈕，我希望將打開和關閉側面導航。我的按鈕的代碼是：打開/關閉sidenav酒吧同樣的按鈕

<button class="myBtn" id="myBtn"><i class="glyphicon glyphicon-info-sign"></i></button>

我試圖使用的addEventListener和想我可能會丟失一個if語句在這一點，但不能肯定：

document.getElementById("myBtn").addEventListener("click", open); 
    function open() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     document.getElementById("main").style.marginLeft = "250px"; 
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
} 
document.getElementById("myBtn").addEventListener("click", close); 
    function close() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main").style.marginLeft = "0"; 
     document.body.style.backgroundColor = "white"; 
}

有什麼建議？謝謝！

來源

2016-10-06 Dave

從哪個方面來說，你希望你的sidenavbar來？ –

我猜你可以使用'if（document.getElementById（'mySidenav'）。offsetWidth == 0）'打開' – kukkuz

sidenavbar是左對齊的，並且會從左邊打開@AsifuzzamanRedoy – Dave

您可以創建一個toogleFunction

document.getElementById("myBtn").addEventListener("click", toggleNav); 

function toggleNav(){ 
    navSize = document.getElementById("mySidenav").style.width; 
    if (navSize == 250) { 
     return close(); 
    } 
    return open(); 
} 
function open() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     document.getElementById("main").style.marginLeft = "250px"; 
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
} 
function close() { 
     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main").style.marginLeft = "0"; 
     document.body.style.backgroundColor = "white"; 
}

來源

2016-10-06 18:35:30

這可能不是一個最好的解決方案，但我試圖展示一個快速解決方案。這就是我如何做

\t document.getElementById("myBtn").addEventListener("click", open); 
 
    function open() { 
 
\t   document.getElementById("mySidenav").style.width = "250px"; 
 
\t   document.getElementById("mySidenav").style.height = "500px"; 
 
\t   document.getElementById("mySidenav").style.backgroundColor = "#ddff11"; 
 
\t   // document.getElementById("main").style.marginLeft = "250px"; 
 
\t   document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
 
\t } 
 
\t document.getElementById("myBtnTwo").addEventListener("click", close); 
 
\t  function close() { 
 
\t   document.getElementById("mySidenav").style.width = "0"; 
 
\t   document.getElementById("main").style.marginLeft = "0"; 
 
\t   document.body.style.backgroundColor = "white"; 
 
\t }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <style> 
 
\t \t 
 
\t </style> 
 
</head> 
 
<body> \t \t 
 

 
<div id="main"> 
 
\t <div id="mySidenav"> 
 
\t \t 
 
\t </div> 
 
</div> 
 

 
<button class="myBtn" id="myBtn"><i class="glyphicon glyphicon-info-sign">Button Open</i></button> 
 
<button class="myBtn" id="myBtnTwo"><i class="glyphicon glyphicon-info-sign">Button Close</i></button> 
 

 

 

 
</body> 
 
</html>

來源

2016-10-06 18:34:30

您好，這可能會幫助你看到下面的小提琴 ****忽略代碼* ***

<script> 
var o =document.getElementById("one"); 
var to =document.getElementById("two"); 
to.style.display = 'none'; 
function openNav() { 
document.getElementById("mySidenav").style.width = "150px"; 
document.getElementById("main").style.marginLeft = "150px"; 
o.style.display = 'none'; 
to.style.display = ''; 
} 
function closeNav() { 
document.getElementById("mySidenav").style.width = "0"; 
document.getElementById("main").style.marginLeft= "0"; 
o.style.display = ''; 
to.style.display = 'none'; 
} 
</script>

sidebar fiddle one button

來源

2016-10-06 18:39:41

這是我在我的評論的意思......

document.getElementById("myBtn").addEventListener("click", open_close); 

var menuState = 0 // close 
function open_close() { 
    if(menuState === 0){ 
    menuState = 1; 
    document.getElementById("mySidenav").style.width = "250px"; 
    //document.getElementById("main").style.marginLeft = "250px"; 
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 
    } 
    else { 
    menuState = 0; 
    document.getElementById("mySidenav").style.width = "0"; 
    //document.getElementById("main").style.marginLeft = "0"; 
    document.body.style.backgroundColor = "white"; 
    } 
    console.log(menuState); 
}

這裏是fiddle

來源

2016-10-06 18:43:09

謝謝，這對我有意義，但我似乎無法完成它。它打開很好，但仍然開放。我認爲第二個菜單中的錯字是罪魁禍首，但它不起作用。 – Dave

它只是做你想做的事情，所以你可以更好地使它可見=真或假... –

如果你願意忘記EventListener，這裏是我的貢獻：

對你身邊的導航菜單，使用：

<nav id='rightMenu' style='display:none;'> 
    <a href='#' onclick='toggleRightMenu()'>Link 1</a> 
    <a href='#' onclick='toggleRightMenu()'>Link 1</a> 
    <a href='#' onclick='toggleRightMenu()'>Link 1</a> 
</nav>

對於按鈕打開（顯示）和關閉（隱藏）導航菜單，使用方法：

<button onclick='toggleRightMenu()'></button>

而對於toogleRightMenu()代碼，使用：

<script> 
    function toggleRightMenu() { 
    navMenuStatus = document.getElementById('rightMenu').style.display; 
    if (navMenuStatus == 'none') { 
     document.getElementById('rightMenu').style.display = 'block'; 
    } else { 
     document.getElementById('rightMenu').style.display = 'none'; 
    } 
    } 
</script>

來源

2017-11-01 23:12:40

打開/關閉sidenav酒吧同樣的按鈕

回答

相關問題