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

Posted 2023-05-07

【中文标题】Toggle-btn，右侧导航侧栏不起作用

【英文标题】：Toggle-btn, Right navigation side bar doesnt work

【发布时间】：2018-04-10 12:47:13

【问题描述】：

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');
   

【问题讨论】：

这是一个 android 问题吗？

是的。安卓应用

那么你必须正确地标记它。特别是您使用的库

目前在我的库中使用 jquery 和 jquery-mobile

【参考方案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>