我要在屏幕上单击将关闭侧边栏

Question

这里是代码：

function openNav() {
  document.getElementById("sidebar").style.width = "200px";
}

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

<div class="col-6 text-left">

  <!-- <span class="toggle-div toggle-btn" onclick="openNav()" id="nav-toggle"> -->
  <span class="toggle-div toggle-btn" onclick="openNav()" id="nav-toggle">
    <i class="fa fa-bars"></i>
  </span>
</div>
<div class="sidebar" id="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <div class="sidebar-img"><a href="home_page.html"><img src="../assets/images/sidebar-img.png"></a></div>
  <div class="side-menus-list">
    <ul id="" class=" ">
      <h6 class="sidebar-head ">
        <li>Menu</li>
      </h6>
      <li class="sidebar-menu">
        <a class=" menu-text-color" href="single_post.html">
          <span class="svg-block">
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" id="noun_Newspaper_772219_1_"
              viewBox="0 0 19.911 17.219" width="19.911" height="17.219" data-name="noun_Newspaper_772219 (1)">
              <g id="Group_44" data-name="Group 44">
                <path class="icon-color" id="Path_62" fill="#454545" transform="translate(-8.9 -14.5)"
                  d="M 27.137 14.5 H 13.484 a 1.687 1.687 0 0 0 -1.7 1.7 v 0.728 H 10.6 a 1.687 1.687 0 0 0 -1.7 1.7 V 29.73 a 1.976 1.976 0 0 0 1.867 1.989 H 26.822 a 2 2 0 0 0 1.989 -1.989 V 16.2 A 1.667 1.667 0 0 0 27.137 14.5 Z M 11.786 29.8 a 0.881 0.881 0 0 1 -0.291 0.679 a 1.057 1.057 0 0 1 -0.7 0.267 A 0.992 0.992 0 0 1 9.87 29.73 V 18.623 A 0.715 0.715 0 0 1 10.6 17.9 h 1.188 Z m 16.079 -0.073 a 1.025 1.025 0 0 1 -1.019 1.019 H 12.514 a 3.436 3.436 0 0 0 0.194 -0.437 v -0.049 c 0.024 -0.049 0.024 -0.121 0.049 -0.194 v -0.049 c 0 -0.073 0.024 -0.146 0.024 -0.243 V 16.2 a 0.715 0.715 0 0 1 0.728 -0.728 h 13.63 a 0.715 0.715 0 0 1 0.728 0.728 Z"
                  data-name="Path 62" />
                <path class="icon-color" id="Path_63" fill="#454545" transform="translate(-45.789 -30.862)"
                  d="M 62.79 36.1 h -4.7 a 0.485 0.485 0 1 0 0 0.97 h 4.7 a 0.485 0.485 0 1 0 0 -0.97 Z"
                  data-name="Path 63" />
                <path class="icon-color" id="Path_64" fill="#454545" transform="translate(-45.789 -39.573)"
                  d="M 62.79 47.6 h -4.7 a 0.485 0.485 0 1 0 0 0.97 h 4.7 a 0.485 0.485 0 1 0 0 -0.97 Z"
                  data-name="Path 64" />
                <path class="icon-color" id="Path_65" fill="#454545" transform="translate(-25.565 -48.284)"
                  d="M 42.565 59.1 H 31.385 a 0.485 0.485 0 0 0 0 0.97 h 11.18 a 0.485 0.485 0 1 0 0 -0.97 Z"
                  data-name="Path 65" />
                <path class="icon-color" id="Path_66" fill="#454545" transform="translate(-45.789 -22.075)"
                  d="M 62.79 24.5 h -4.7 a 0.485 0.485 0 1 0 0 0.97 h 4.7 a 0.485 0.485 0 1 0 0 -0.97 Z"
                  data-name="Path 66" />
                <path class="icon-color" id="Path_67" fill="#454545" transform="translate(-25.565 -57.071)"
                  d="M 42.565 70.7 H 31.385 a 0.485 0.485 0 1 0 0 0.97 h 11.18 a 0.485 0.485 0 1 0 0 -0.97 Z"
                  data-name="Path 67" />
                <path class="icon-color" id="Path_68" fill="#454545" transform="translate(-25.565 -22.075)"
                  d="M 31.385 31.072 h 4.268 a 0.486 0.486 0 0 0 0.485 -0.485 v -5.6 a 0.486 0.486 0 0 0 -0.485 -0.485 H 31.385 a 0.486 0.486 0 0 0 -0.485 0.485 v 5.6 A 0.486 0.486 0 0 0 31.385 31.072 Z m 0.485 -5.6 h 3.3 V 30.1 h -3.3 Z"
                  data-name="Path 68" />
              </g>
            </svg>
          </span>
          Home
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 1

尝试添加