javascript - 来自多个按钮的多个 Sidenav？

标签 javascript jquery html css

我正在开发一个屏幕右侧有五个图标的网站。在完美的世界中，单击每个图标都会打开其各自的侧边导航。

例如:

MyBtn onclick 打开 sidenav 并关闭所有其他 sideav。

MyBtn2 onclick 打开 sidenav2 并关闭所有其他 sidenav。

...然后...

但是，

我目前有五个图标。不幸的是，当单击任何一个图标时；它打开 sidenav5 而不是其各自的 sidenav。

我在这里缺少什么？

提前感谢任何可以提供帮助的人!

下面的相关颂歌...我确实倾向于使用我知道是禁忌的样式标签:

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

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
		/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn2").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav2").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav2").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
	
	/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn3").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav3").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav3").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
	
	/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn4").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav4").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav4").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
	
	/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn5").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav5").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav5").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}	
#sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav {padding-top: 15px;}
  #sidenav a {font-size: 18px;}
}
	
	
	
	
	

	
	
	/**/
	
	
	
	
	
	
	
	
	
	
	#sidenav2 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav2 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav2 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav2 {padding-top: 15px;}
  #sidenav2 a {font-size: 18px;}
}
	
	
	
	
	
	
	
	
	/**/
	
	
	
	
	
	
	#sidenav3 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav3 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav3 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav3 {padding-top: 15px;}
  #sidenav3 a {font-size: 18px;}
}
	
	
	
	
	
	/**/
	
	
	
	
		#sidenav4 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav4 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav4 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav4 {padding-top: 15px;}
  #sidenav4 a {font-size: 18px;}
}
	
	
	
	
	
	
	/**/
	
	
	
	
	
	
	
		#sidenav5 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav5 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav5 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav5 {padding-top: 15px;}
  #sidenav5 a {font-size: 18px;}
}
	
	
	
	#main {
    transition: margin-left .5s;
    padding: -16px;
}
	
<!---->																		
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav" class="sidenav">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
		<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav2" class="sidenav2">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/The Museum Line.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Museum Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav3" class="sidenav3">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Practice Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Practice Swords</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav4" class="sidenav4">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav5" class="sidenav5">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Squire Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>

最佳答案

我不只是解决这个问题，而是尝试在未来为您解决很多麻烦。您的代码可以得到显着的清理。内联样式和每个元素的函数将成为将来维护的噩梦。我强烈建议您走类似于我下面展示的路线。值得注意的是，我遗漏了一些内容以简化它，但只要您遵循相同的模式(这是增强可维护性的很大一部分)，添加其他元素就可以了。另外，如果这不完全是您想要的菜单功能，我深表歉意，我无法从您的代码中准确判断，但您应该能够根据这个概念进行构建

请参阅fiddle here

HTML

<div class="sidenav">
  <div class="icons">
    <div class="icon">Nav 1</div>
    <div class="icon">Nav 2</div>
    <div class="icon">Nav 3</div>
  </div>
  <div class="nav-items">
      <ul class="item-set">
        <li>Early Swords</li>
        <li>Roman Swords</li>
        <li>Viking Swords</li>
        <li>Medieval One Handed</li>
        <li>Hand &amp; a Half Swords</li>
        <li>Medieval Two Handed</li>
        <li>Single Edged Swords</li>
        <li>Next Generation Scabbards</li>
      </ul>
      <ul class="item-set">
        <li>One Handed Museum Line Swords</li>
        <li>Two Handed Museum Line Swords</li>
        <li>Museum Line Scabbards</li>
      </ul>
      <ul class="item-set">
        <li>One Handed Practice Swords</li>
        <li>Two Handed Practice Swords</li>
      </ul>
  </div>
</div>

CSS

.sidenav {
  width:350px;
}

.icons {
  width:50px;
  float:left;
}

.icons .icon:hover {
  cursor:pointer;
  text-decoration:underline;
}

.nav-items {
  width:300px;
  float:right;
}

.nav-items {
  overflow:hidden;
}

.nav-items ul {
  margin-top:0px;
  margin-left:-300px;
  display:none;
}

.nav-items li {
  list-style-type:none;
  cursor:pointer;
}

看看这个 Javascript/Jquery 有多简单

$(document).ready(function()
{
  slideRight($(".item-set").eq(0));

  $(".icons .icon").click(function()
  {
    var idx = $(this).index();
    slideLeft($(".item-set"));
    slideRight($(".item-set").eq(idx));
  });
});

function slideRight(elem) {
  elem.show();
  elem.animate({ 'marginLeft': '0px' }, 100);
}

function slideLeft(elem) {
  elem.hide();
  elem.css({ 'marginLeft': '-300px' });
}

关于javascript - 来自多个按钮的多个 Sidenav？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46911267/

上一篇：javascript - 将鼠标悬停在一个选择上打开所有选项

下一篇：javascript - laravel 5.5 提交表单时的甜蜜提醒

相关文章：

javascript - 免费 JavaScript 工具栏菜单

javascript - 辅助方法无法使用 setState 设置增量 id

html - 如何在 Bootstrap 5 中合并 2 个 DIV 表行

html - Bootstrap 3 模态显示透明背景

javascript - 结合href Bootstrap自动执行数据切换

javascript - 我收到错误 : Can't perform a React state update on an unmounted component even though i created cleanup

javascript - 检查变量是否包含 Javascript 中的数值？

php - 将表单数据传递给 Controller

javascript - 两个单独的模型 - 您不能将绑定(bind)多次应用于同一元素

javascript - 根据输入值(HTML、JavaScript)生成表代码(不是表)

©2024 IT工具网  联系我们