Javascript 如何在href单击时关闭sidenav

导航工作正常，但单击链接时sidenav应关闭。 因为这是一页。我该怎么做？谁能帮帮我吗

代码：

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}

点击打开

☰ 打开

您的代码工作正常。您似乎只是忘记了将

closenav（）

添加到实际链接上的

onlick

事件中

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}

点击打开

☰ 打开

试试这个：

HTML:

<div id="mySidenav" class="sidenav jsSideNav">
          <a href="javascript:void(0)" class="">&times;</a>
          <a id="nav" href="#about">About</a>
          <a id="nav" href="#service">Services</a>
          <a id="nav" href="#contact">contact</a>
    </div>
    <p>Click to open</p>
    <span style="font-size:30px;cursor:pointer" class="jsToggleNav">&#9776; open</span>

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav.active {
    width: 250px;
}

$(document).ready(function(){
        $(".jsToggleNav").on('click', function(){
            if($(".jsSideNav").hasClass('active')) {
                $(".jsSideNav").removeClass('active');
            } else {
                $(".jsSideNav").addClass('active');
            }
        })
    });

JS:

<div id="mySidenav" class="sidenav jsSideNav">
          <a href="javascript:void(0)" class="">&times;</a>
          <a id="nav" href="#about">About</a>
          <a id="nav" href="#service">Services</a>
          <a id="nav" href="#contact">contact</a>
    </div>
    <p>Click to open</p>
    <span style="font-size:30px;cursor:pointer" class="jsToggleNav">&#9776; open</span>

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav.active {
    width: 250px;
}

$(document).ready(function(){
        $(".jsToggleNav").on('click', function(){
            if($(".jsSideNav").hasClass('active')) {
                $(".jsSideNav").removeClass('active');
            } else {
                $(".jsSideNav").addClass('active');
            }
        })
    });

我假设您使用的是jquery，也遵循专门用于js操作的类名命名约定

---

希望这能对你有所帮助。

我看不见树木。非常感谢你，七位！没问题：）很高兴“帮助”：