Question

我有一个按钮，我希望能打开和关闭侧导航。我的按钮代码是：

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

有什么建议吗？谢谢！

Answer 1

这就是我在评论中的意思......

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

Answer 2

这可能不是最佳解决方案，但我尝试展示快速解决方案。这就是我做的事情

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>		

<div id="main">
	<div id="mySidenav">
		
	</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>

Answer 3

您可以创建一个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";
}

Answer 4

你好这可能会帮助你看到下面的小提琴 ****忽略代码****

 <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

Answer 5

如果您愿意忘记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>

Answer 6

最简单，最简单的解决方案是切换按钮上的onclick="function()"。不过，这并未使用addEventListener。

将这两行添加到您的两个打开和关闭功能中：

document.getElementById("myBtn").onclick = close;

document.getElementById("myBtn").onclick = open;

您的完整代码将如下所示。

function open() {
    document.getElementById("myBtn").onclick = close;
    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("myBtn").onclick = open;
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}

打开/关闭sidenav栏相同的按钮

6 个答案: