Question

我有一个从侧面弹出的导航，并想知道它会如何出来然后再使用相同的按钮。这可能很容易，但我不确定如何做到这一点。

侧导航和普通导航

function openNav() {
  document.getElementById("mainSidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mainSidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

function navButton(x) {
  x.classList.toggle("change");
}

<div id="mainSidenav" class="sidenav">
  <a href="#">page 1</a>
  <a href="#">page 2</a>
  <a href="#">page 3</a>
  <a href="#">page 4</a>
</div>

<div id="main">
  <header>
    <nav class="navbar navbar-light bg-light flex-row-reverse"> <span class="h1 navbar-brand mb-0">Navbar</span>
      <form class="justify-content-end">
        <div class="navButton" onclick="navButton(this);openNav();closeNav();">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
      </form>
    </nav>
  </header>
</div>

并且应该控制一切的按钮是“navButton”

Answer 1

您可以设置一个班级＆＃39; open＆＃39;如果在打开/关闭函数中打开侧边栏并使用这样的JQuery：

$('.navButton').on('click', function() {
     if($('#mainSidenav').hasClass('opened')) {
          closeNav(); //remove class opened to mainSidenav in this method
     } else {
          openNav(); //open class opened to mainSidenav in this method
     }  
})

Answer 2

在函数中只检查x是否有类更改，是否调用closeNav（）并删除类更改，并对else情况执行相反的操作。

function navButton(x) {
  if(x.classList.contains("change")){
     closeNav();
     x.classList.remove("change");

  }else{
     openNav();
     x.classList.add("change");
  }
}

你也只需要从.navButton的onclick调用navButton（）。

    <div class="navButton" onclick="navButton(this)">

Answer 3

这是我的代码版本，我实现了我所知道的任何内容而不是使用内联样式只需添加一个类来进行宽度更改！然后你为图标创建的div可以使用一个名为Font Awesome的真棒库来制作，除此之外还增加了一些基本的样式，使布局和演示看起来更好。

如果有任何问题，请告诉我们！

＆＃13;

function toggleNav() {
  document.getElementById("mainSidenav").classList.toggle("open");
  document.getElementById("main").classList.toggle("open");
}

function navButton(x) {
  x.children[0].classList.toggle('fa-bars');
  x.children[0].classList.toggle('fa-close');
}

＆＃13;

body {
  margin: 0px;
}

#mainSidenav {
  background-color: lightblue;
}

#mainSidenav a {
  display: list-item;
}

#mainSidenav {
  overflow: hidden;
}

.navButton div {
  height: 3px;
}

#main.open {
  margin-left: 250px;
}

#main {
  margin-left: 0px;
}

#mainSidenav.open {
  width: 250px;
}

#mainSidenav {
  width: 0px;
}

nav {
  position: absolute;
  top: 0px;
  display: flex;
  background-color: lightgreen;
  width: 100%;
}

.mb-0 {
  margin-right: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="mainSidenav" class="sidenav">
  <a href="#">page 1</a>
  <a href="#">page 2</a>
  <a href="#">page 3</a>
  <a href="#">page 4</a>
</div>

<div id="main">
  <header>
    <nav class="navbar navbar-light bg-light flex-row-reverse"> <span class="h1 navbar-brand mb-0">Navbar</span>
      <form class="justify-content-end">
        <div class="navButton" onclick="navButton(this);toggleNav();">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
      </form>
    </nav>
  </header>
</div>

＆＃13;

在同一个按钮上切换Javascript函数

3 个答案: