侧边导航栏不会通过 onclick 保持打开状态。必须按住按钮才能打开并保持打开状态答案

【问题标题】：Side navigation bar won't stay open with onclick. Have to hold down the button for it to open and stay open侧边导航栏不会通过 onclick 保持打开状态。必须按住按钮才能打开并保持打开状态
【发布时间】：2021-08-22 03:35:53
【问题描述】：

我正在尝试使用 onclick 功能让我的侧边导航栏保持打开状态。

JS：

 <script>
let btn = document.querySelector("#btn");
let sidenav = document.querySelector(".sidenav");
    
btn.onclick = function(){
    sidenav.className.toggle("active");
    
}
</script>

除了课程不会保持活动状态外，这是有效的。一旦我取消单击鼠标，切换按钮就会消失，导航栏会恢复为压缩状态。

HTML

<div class="sidenav">
        <div class="logo_content">
            <div class="logo">
                <i class='bx bx-book-bookmark'></i>
                <div class="logoName">Company Title</div>
            </div>
            <i class='bx bx-menu' id="btn"></i>
        </div>

这里是加宽导航边框的 CSS

.sidenav{
    position: fixed;
    top: 0;
    left:0;
    height: 100%;
    width: 78px;
    box-shadow: -1px -2px 30px black;
    padding: 6px 14px;
    border: 4px white solid;
    border-radius: 20px;
    transition: all 1s ease;
}
.sidenav:active{
    width: 240px;
    
}

【问题讨论】：

您是否尝试过stopPropagation 或使用addEventListener 而不是将函数分配给onclick？还请为此 sidenav 提供您的 HTML 和 CSS 的最小可复制示例。
我正在观看的视频将“sidenav”的类名更改为“sidenav active”，这是该函数应该做的事情
这是为 css 设计的。当有active时，css应该显示在它的位置，否则它会被放在不可见的位置
我添加了一些 css 以便您查看
您需要使用 onclick 事件处理程序。 \

标签： javascript html css navigation sidebar

【解决方案1】：

您不能真正切换:active 或:hover 等伪类。您可以为它添加另一个类，就像在下面的 sn-p 上的 sidenav-active 一样。 className 也没有这样的功能toggle。您可以改为切换classList。例如：

elem.classList.toggle()

工作示例：

let btn = document.querySelector("#btn");
let sidenav = document.querySelector(".sidenav");
    
btn.addEventListener('click', function(e){
    sidenav.classList.toggle("sidenav-active");
    if(sidenav.classList.contains("sidenav-active")){
      btn.innerText = "Shrink";
    } else btn.innerText = "Expand";
});

.sidenav{
    position: fixed;
    top: 0;
    left:0;
    height: 100%;
    width: 78px;
    box-shadow: -1px -2px 30px black;
    padding: 6px 14px;
    border: 4px white solid;
    border-radius: 20px;
    transition: all 1s ease;
}

.sidenav-active{
    width: 240px;
    
}

<div class="sidenav">
  <div class="logo_content">
      <div class="logo">
          <i class='bx bx-book-bookmark'></i>
          <div class="logoName">Company Title</div>
      </div>
      <button id="btn">Expand</button>
  </div>
</div>

【讨论】：

【解决方案2】：

只需创建一个类.active，就可以使用object.classList.toggle("active")

片段

let btn = document.querySelectorAll("[toggleMenu]");
let sidenav = document.querySelector(".sidenav");
    
for(var x=0; x < btn.length; x++){
  btn[x].onclick = function(){
    sidenav.classList.toggle("active"); 
    if(sidenav.classList.contains("active")){
      this.innerHTML = "Collspand";
    }
    else{
      this.innerHTML = "Expand";
    }
  }
}

.sidenav{
    position: fixed;
    top: 0;
    left:0;
    width: 78px;
    height: 100%;
    box-shadow: -1px -2px 30px black;
    padding: 6px 14px;
    border: 4px white solid;
    border-radius: 20px;
    transition: all 1s ease;
    background:#fff;
}

.sidenav.active{
    width: 240px;
    
}

<div class="sidenav">
        <div class="logo_content">
            <div class="logo">
                <i class='bx bx-book-bookmark'></i>
                <div class="logoName">Company Title</div>
            </div>
            <br>
              <button toggleMenu>Expand</button>  

        </div>
</div>

<div class="body">
</div>

【讨论】：