Toggle-btn，右侧导航侧栏不起作用

Question

toggle-btn 有问题。导航内容应该从右向左滑出。但是，内容固定在页面的右侧，按钮根本不起作用。我可以知道我该怎么做吗？

HTML：

 <div id="sidebar" align="center">

        <button class="toggle-btn" onclick="toggleSidebar()">
            <span></span>
            <span></span>
            <span></span>
        </button>
            <ul class="side">
              <li>Home</li>
              <li>Contact</li>
              <li>About Us</li>
            </ul>
 </div>

---

CSS：

#sidebar.active{
    nav-right:1px;
}

#sidebar .side {
    position: fixed;
    width: 200px;
    height: 100%;
    background: #151719;
    left: 200px;
    transition: all 500ms linear;

}

#sidebar ul li {
    color: rgba(230,230,230,0.9); 
    list-style: none; 
    padding: 15px 10px; 
    border-bottom: 3px solid rgba(100,100,100,0.6);
}

#sidebar .toggle-btn{
    position:absolute;
    right:10px;
    top:1px;
}

#sidebar .toggle-btn span{
    display:block;
    width:25px;
    height:3px;
    background: #151719;
    margin: 2.5px 0px;
}

---

Javascript：

function toggleSidebar() {
       document.getElementById("sidebar").classList.toggle('active');
   }

Answer 1

您可以通过检查锚点的 href 属性来切换侧边栏的状态。 在这里查看演示codepen

function toggleSidebar(ref){
  document.getElementById("sidebar").classList.toggle('active');
}

(function(){
  var sidebarAnchors = document.querySelector("#sidebar").getElementsByTagName('a');
  for(var i=0;i<sidebarAnchors.length;i++){
    sidebarAnchors[i].onclick = function(event){
      if(event.hash != "" || event.hash != undefined || event.hash != null){
        toggleSidebar(null);
      }
    };
  }
})();

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  font-family:sans-serif;
}

#sidebar {
  position:fixed;
  top:0px;
  left:-200px;
  width:200px;
  height:100%;
  background:#151719;
  transition:all 300ms linear;
}
#sidebar.active {
  left:0px;
}
#sidebar .toggle-btn {
  position:absolute;
  left:220px;
  top:10px;
}
#sidebar .toggle-btn span {
  display:block;
  width:30px;
  height:5px;
  background:#151719;
  margin:5px 0px;
  cursor:pointer;
}
#sidebar div.list div.item {
  padding:15px 10px;
  border-bottom:1px solid #444;
  color:#fcfcfc;
  text-transform:uppercase;
  font-size:15px;
}

#sidebar div.list div.item a {
  text-decoration:none;
  color:#fcfcfc;
}
body {
  padding-left:220px;
}

<div id="sidebar">
  <div class="toggle-btn" onclick="toggleSidebar(this)">
    <span></span>
    <span></span>
    <span></span>
  </div>  
  <div class="list">
    <div class="item"><a href="http://codingflag.com">Home</a></div>
    <div class="item"><a href="#about">About us</a></div>
    <div class="item"><a href="#contact">Contact us</a></div>
  </div>
</div>
<p id="home">
<h1>Home</h1>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p>
  
  
  <p id="about">
<h1>About</h1>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p>
  
  <p id="contact">
<h1>Contact</h1>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p>
<p>