javascript - 来自多个按钮的多个 Sidenavs？-6ren

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

转载作者：行者123 更新时间：2023-11-29 17:48:14

我正在处理一个在屏幕右侧有五个图标的网站。在一个完美的世界中，点击每个图标都会打开其各自的 sidenav。

例如:

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

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

...等等...

但是，

我目前有五个图标。不幸的是，当任何一个图标被点击时；它打开 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>

最佳答案

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

请参阅 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 - 来自多个按钮的多个 Sidenavs？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46911267/

文章推荐： android - 获取 ListView 中所选按钮的位置

文章推荐： php - Codeigniter 在 config/database.php 之外创建数据库和表

文章推荐： android - RelativeLayout 中的 TextView 与 ImageView 重叠

materialize - 在 sideNav 外部单击时禁止关闭 sideNav
我在我的应用程序中使用 MaterializeCSS 的 sideNav。我不想在点击外部时关闭 sideNav。它可以在这样的模态中实现: { dismissible: false } 如何在 si
javascript - sidenav 叠加在粘性导航栏上，sidenav 叠加的高度有问题
我对 sidenav 叠加层的高度有这个问题，我知道它与粘性导航栏的 javascript 混淆，但我不知道如何使 sidenav 的高度达到 100%。任何帮助将不胜感激! 代码如下:
javascript - SideNav - MaterializeCss - 绑定(bind)事件 sidenav 关闭
当 sidenav 关闭时，我找不到任何方法来绑定(bind)火的东西 ( http://materializecss.com/side-nav.html ) 我什至找不到相关的文档。其实我正在做一
html - 如果图像在 sidenav 中，则 Material Sidenav 会溢出内容
早上好! 我在我的 Angular 应用中使用 Material Design 侧边导航来为用户提供页面选择。侧面导航首先包含 Logo ，然后是用户可以选择的所有页面 - 如果他已登录。问题:如果
angular - mat-toolbar、mat-sidenav 和 mat-sidenav-container 不是已知元素
我正在尝试使用 mat-toolbar 但出现错误: mat-menu.component.html: Responsive Navigation Menu I
javascript - 使用 Material Angular 和 Leaflet 切换 sidenav 时调整 sidenav-content 的大小
我正在使用 Angular、Angular-Material 和 Leaflet 创建一个具有 sidenav 和 map 的网络。
angular - sidenav 生成已经声明结束的抽屉
我有以下代码: Settings
javascript - 带点滚动的 sidenav
我问了类似的问题，但没有得到答案，所以我会再试一次。我有一个网页。在此页面中，我试图用点制作侧面导航。网页被分成几个部分。我需要做到这一点，以便每次滚动到另一个部分时，该点都会改变颜色。例如:第一部分
javascript - $(...).sideNav 不是函数
我刚刚下载了 mdbootstrap。按照在网页上实现侧面导航的说明进行操作后，当我尝试初始化它时，出现以下错误: Uncaught TypeError: $(...).sideNav is not
javascript - 来自多个按钮的多个 Sidenavs？
我正在处理一个在屏幕右侧有五个图标的网站。在一个完美的世界中，点击每个图标都会打开其各自的 sidenav。例如: MyBtn onclick 打开 sidenav 并关闭所有其他 sideav。
javascript - Sidenav 栏应从右侧而不是左侧打开
我有一个简单的 javascript 可以为我打开一个侧边栏，但我希望它在右侧而不是左侧。请参阅下面的 gif 和代码。任何人都知道我需要做什么来解决这个问题？非常感谢您添加的任何解释，以便我更好地理
html - sidenav 内容不对齐
我的 sidenav 中的内容不在其容器内。它在 jsfiddle 中看起来不错，但在我的浏览器中却不行。 (Firefox 17.1 Ubuntu Quantal) jsfiddle
html - 如何删除母版页中的页眉和 sidenav？
我创建了一个母版页 - wrap.master，其中附有许多内容页。现在我想创建一个新的内容页面并附加到它上面。母版页有一个标题和侧面导航。但是在我的新内容页面中，我不想要标题和侧面导航。通常，我希望
javascript - sidenav 关闭时按钮不起作用
由于某些原因，我正在我的网站按钮上的登录页面上工作，当 sidenav 退出时提交按钮不可点击(我正在使用物化框架)。我对我的 sidenav 做了一些修改，这样当覆盖层出来时它就会被移除，并且在它
javascript - Sidenav 覆盖固定在右上角
大家好，我正在尝试让固定在右上角的导航来自屏幕的右侧(从右到左的动画)。现在使用来自 w3school 的示例，我能够想出以下代码:HTML: × About Services Cli
html - 点击打开reactjs sideNav
我试图在点击按钮时打开react sideNav栏。我指的是这些文章来做到这一点: https://github.com/gauravchl/react-simple-sidenav https://
具有双倍滚动内容的 Angular Material Sidenav
对于基于 Angular Material 的项目，我正在尝试使用 sidenav具有不同 View 可能性的组件，具体取决于用户的设备(台式机或手机)。到目前为止它有效，但有一些问题。也就是说，内容
angular - 在外部单击时关闭 mat-sidenav
每当用户点击不在侧边栏中的某个地方时，我都会尝试关闭侧边栏。我已经尝试过双向数据绑定(bind)，现在正在尝试 rxjs' Subject 应用模板应用组件 openedSubject = new
css - 如何禁用 sidenav 上的滚动
我想问我有一个显示隐藏菜单(openNav，closeNav) 这是我的 javascript : function openNav() { document.getElementById(
选项卡主体内的 Angular Material sidenav
像下面这样在 mat-tab 中加载 sidenav 是否有效？ Sidenav Main Content

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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