JS - 在关闭之前打开的子导航时打开子导航

Question

我刚刚开始 Javascript，我正在尝试获取侧导航的子菜单以执行两个功能（打开所需的子菜单，同时关闭任何当前打开的子菜单）

这是当前的状态：

https://jsfiddle.net/dangeruss/r67Lzpnh/5/

我在想：

function toggleNav() {
var element = document.getElementById("mySidenav2");
if (element.style.width == "250px") {
    element.style.width = "0px";
} else {
    element.style.width = "250px";
}

但我不确定如何关闭任何打开的 sidenave (mySidenavX) 和打开 mySidenav3 等

Answer 1

正如评论中提到的 epascarello，您可以使用 classes 来合并功能并使您的代码更简单。

例如，您有两个子导航。给它们相同的 class，并使用它对两者执行相同的操作，一次或单独进行。至于关闭 "the other" 打开 sideNav，不需要知道打开的是哪个 - 只需关闭它们，通过 className，然后打开一个你想要的。

Here is your updated jsFiddle 进行了这些更改。

function openMainNav() {
  document.getElementById("myMainNav").classList.add('sideNavOpen');
  document.getElementById("main").classList.add('lmarg250');
}
function openSubNav(num) {
  closeSubNavs();
  document.getElementById("mySidenav"+num).classList.add('sideNavOpen');
  document.getElementById("main").classList.add('lmarg500');
}
function closeMainNav() {
  closeSubNavs();
  document.getElementById("myMainNav").classList.remove('sideNavOpen');
  document.getElementById("main").classList.remove('lmarg250');
  document.getElementById("main").classList.remove('lmarg500');
}
function closeSubNavs() {
  let subs = document.querySelectorAll(".sub-sidenav");
  subs.forEach( (el) => {
   el.classList.remove('sideNavOpen');
  });
}

body {font-family: "Lato", sans-serif;}
    .main-sidenav {
      height: 100%;
      width: 0;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
      position:absolute;
    }
    .sub-sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgb(153, 4, 141);
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
      margin-left: 250px;
      z-index:10;
    }
    
    .lmarg250 {margin-left:250px;}
    .lmarg500 {margin-left:500px;}
    .sideNavOpen{width:250px;}
    .main-sidenav a, .sub-sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .main-sidenav span, .sub-sidenav span {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .main-sidenav a:hover, .sub-sidenav a:hover {
      color: #f1f1f1;
    }

    .main-sidenav .closebtn, .sub-sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }    
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }

<div id="myMainNav" class="main-sidenav">
  <a onclick="closeMainNav()" href="javascript:void(0)" class="closebtn">&times;</a>
  <span onclick="openSubNav(2)" style="font-size:30px;cursor:pointer">Starters</span>
  <span onclick="openSubNav(3)" style="font-size:30px;cursor:pointer">Snacks</span>
  <a href="#">Omelet</a>
  <a href="#">American Favorites</a>
  <a href="#">Burgers</a>
  <a href="#">Hot Dogs</a>
  <a href="#">Sandwich / Wrap</a>
  <a href="#">Salads</a>
  <a href="#">Kids Menu</a>
  <a href="#">Extras</a>
  <a href="#">Drinks</a>
  <a href="#">Beer & Wine</a>
  <a href="#">Cocktails</a>
  <a href="#">Milkshakes</a>
  <a href="#">Desserts</a>
  <a href="#">Waffles etc.</a>
  <a href="#">Coffee</a>

</div>

<div id="mySidenav2" class="sub-sidenav">
  <a onclick="closeSubNavs()" href="javascript:void(0)" class="closebtn2">&times;</a>
  <a href="munchie.html">Starters</a>
  <a href="#">Cheeses</a>
  <a href="#">Meats</a>
  <a href="#">Dips</a>
</div>

<div id="mySidenav3" class="sub-sidenav">
  <a onclick="closeSubNavs()" href="javascript:void(0)" class="closebtn2">&times;</a>
  <a href="munchie.html">Snacks</a>
  <a href="#">Cheesie</a>
  <a href="#">Chips</a>
  <a href="#">Popcorn</a>
</div>

<div id="main">
  <h2>Website</h2>
  <p>This is a site made by spider-webs</p>
  <span onclick="openMainNav()" style="font-size:30px;cursor:pointer">&#9776; open</span>
</div>

更新：

已更新以在关闭主菜单和打开任何子导航时添加对 closeSubNavs() 的调用。关闭主 sideNav 时，您可能还想关闭任何保持打开状态的子 sideNav，是吗？此外，在打开任何子导航之前，请调用 closeSubNavs() 以关闭任何其他打开的子导航。抱歉忘记了这一步。

上面更新了 StackSnippet。 Here is the link 到更新的 jsFiddle。

JS - 在关闭之前打开的子导航时打开子导航

JS - Opening Sub Nav while Closing previously opened Sub-Nav

javascript

sidenav

更新：