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

Question

我的切换 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>