推送菜單切換按鈕

我對JavaScript並不是很有經驗，所以現在我想要一些幫助。我使用從網站左側滑入的推送菜單。現在，JS代碼使用一個按鈕打開菜單（onclick =「openNav（）」），另一個關閉它（onclick =「closeNav（）」）。推送菜單切換按鈕

我想使用切換（漢堡包）按鈕來打開和關閉，但不幸的是我無法弄清楚如何調整JS代碼 - 保持不透明度改變和幻燈片/推送功能。

幫助？

JS：

function openNav() { 
    document.getElementById("mySidenav").style.width = "150px"; 
    document.getElementById("main2").style.marginLeft = "150px"; 
    document.body.style.backgroundColor = "rgba(0, 0, 0, 0.1)"; 
} 


function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById(」content」).style.marginLeft= "0"; 
    document.body.style.backgroundColor = "white"; 
}

HTML：

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">CLOSE</a> 
    <a href=」#anchor01」>Anchor 01</a> 
    <a href=」#anchor02」>Anchor 02</a> 
</div> 

<div id=」content」> 
<div id="main"> 
<span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776;</span> 
</div> 
</div>

來源

2016-10-05 soulitude

嘗試這樣的事情

function openNav() { 
    document.getElementById("mySidenav").style.width = "150px"; 
    document.getElementById("main2").style.marginLeft = "150px"; 
    document.body.style.backgroundColor = "rgba(0, 0, 0, 0.1)"; 
} 


function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById(」content」).style.marginLeft= "0"; 
    document.body.style.backgroundColor = "white"; 
} 

var clickCount = 0; 

$('#togglebutton').click(function(){ //replace the id with the toggle button id 
    if(clickCount%2==0){ 
     openNav(); 
    }else{ 
     closeNav(); 
    } 
    clickCount++; 
});

在這裏，我使用的是每次點擊遞增計數器。如果櫃檯很奇怪，應該打開，否則關閉。

來源

2016-10-05 10:59:10

謝謝！奇蹟般有效。 – soulitude

JS：

$(document).ready(function() { 
$("#toggle").click(function() { 
    $("#mySidenav").toggleClass("active"); 
    if($("#mySidenav").hasClass("active")) { 
    $("mySidenav").css("width","150px"); 
    $("main2").css("margin-left", "150px"); 
    $("body").css("background-color","rgba(0, 0, 0, 0.1)"); 
    } 
    else { 
    $("mySidenav").css("width","0px"); 
    $("main2").css("margin-left", "0px"); 
    $("body").css("background-color","white"); 

    } 
}) 
})

HTML：

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">CLOSE</a> 
    <a href=」#anchor01」>Anchor 01</a> 
    <a href=」#anchor02」>Anchor 02</a> 
</div> 

<div id=」content」> 
    <div id="main"> 
    <span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776;</span> 
    </div> 
</div> 
<div id="toggle">Toggle</div>

來源

2016-10-05 11:20:06

推送菜單切換按鈕

回答

相關問題