1

我刚刚启动 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等。

4

1 回答 1

0

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

例如，您有两个子导航。给他们相同的类，并使用它对两者执行相同的操作，一次或单独。至于关闭“另一个”打开的sideNav，不需要知道哪个是打开的——只需通过className将它们全部关闭，然后打开你想要的那个。

这是您更新的 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()在关闭 mainMenu 和打开任何 subNav 时添加调用。关闭主侧导航时，您可能还想关闭任何保持打开状态的子侧导航，是吗？此外，在打开任何 subNav 之前，调用 closeSubNavs() 以关闭任何其他打开的。很抱歉忘记了这一步。

StackSnippet 在上面更新。这是更新的 jsFiddle 的链接。

于 2019-12-31T15:27:00.593 回答