Question

我对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>

Answer 1

尝试这样的事情

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++;
});

在这里，我使用一个计数器，每次点击都会递增。如果计数器是奇数，则应打开，否则关闭。

Answer 2

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>

按菜单切换按钮

2 个答案: