如何在点击 href 时关闭 sidenav

Question

导航工作正常，但点击 link 时 sidenav 应该关闭。因为它是一页。我怎样才能做到这一点？有谁可以帮助我吗。

代码：

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

.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;
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&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" onclick="openNav()">&#9776; open</span>

当点击 link 时，sidenav 应该会关闭

Answer 1

您的代码运行完美。您似乎只是忘了将 closenav() 添加到实际链接上的 onlick 事件中。

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

.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;
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a id="nav" href="#about" onclick="closeNav()">About</a>
  <a id="nav" href="#service" onclick="closeNav()">Services</a>
  <a id="nav" href="#contact" onclick="closeNav()">contact</a>

</div>
<p>Click to open</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

Answer 2

试试这个：

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>

CSS:

.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;
}

JS:

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

我假设你使用的是jquery，也遵循class名称的命名约定，专门用于js操作。

希望对您有所帮助。

如何在点击 href 时关闭 sidenav

How to close sidenav on a href click

javascript

jquery

css

html

sidenav