Блог

Я не очень разбираюсь в JavaScript, поэтому теперь мне нужна помощь. Я использую нажимное меню, которое появляется слева на веб-сайте. Прямо сейчас код JS использует одну кнопку для открытия меню (onclick =»openNav ()»), а другую — для его закрытия (onclick =»closeNav ()»).

Вместо этого я хочу использовать кнопку переключения (гамбургера) для открытия и закрытия, но, к сожалению, я не могу понять, как настроить код JS — сохраняя изменение непрозрачности и функцию slide / push.

Помочь?

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()">amp;#9776;</span>
</div>
</div>
  

попробуйте что-то вроде этого

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

Здесь я использую счетчик, который увеличивается при каждом нажатии. Если счетчик нечетный, он должен быть открыт, в противном случае закрыт.

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()">amp;#9776;</span>
  </div>
</div>
<div id="toggle">Toggle</div>