如何创建自动隐藏侧边栏

Question

我正在尝试生成一个侧边栏，通过单击除侧边栏（使用 js 或 css）之外的所有其他内容来自动隐藏。我的代码是：<script>function openNav() {    document.getElementById("mySidenav").style.width = "250px";}</script>...<div id="mySidenav" class="sidenav">  <a href="#">About</a>  <a href="#">Services</a>  <a href="#">Clients</a>  <a href="#">Contact</a></div><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>和 css 是：<style>.sidenav {    height: 100%;    width: 0;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: #111;    overflow-x: hidden;    transition: 0.5s;    padding-top: 60px;}.sidenav a {    padding: 8px 8px 8px 32px;    text-decoration: none;    font-size: 25px;    color: #818181;    display: block;    transition: 0.3s;}</style>我使用了 HTML、JavaScript 和 CSS

Answer 1

尝试以下解决方案。

.sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

}

.sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s;

}

<script>

function openNav() {

    document.getElementById("mySidenav").style.width = "250px";

}

window.addEventListener('click', function(e){   

  if (!document.getElementById('mySidenav').contains(e.target) && !document.getElementById('myMenu').contains(e.target)){

    // Clicked in box

   document.getElementById("mySidenav").style.width = "0px";  

  } else{

   

 // document.getElementById("mySidenav").style.width = "0px";

  }

});

</script>

<div id="mySidenav" class="sidenav">

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Clients</a>

  <a href="#">Contact</a>

</div>

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

Answer 2

你可以试试这样的

<style>

    #mySidenav {

        display: none;

    }

</style>

<script>

  document.body.addEventListener('click', function (e) {

    if (e.target.parentNode.id === 'mySidenav') {

      document.getElementById("mySidenav").style.display = "block";

      e.preventDefault();

      return;

    }

    document.getElementById("mySidenav").style.display = "none";

  }, true);

  function openNav() {

    document.getElementById("mySidenav").style.display = "block";

  }

</script>

<div id="mySidenav" class="sidenav">

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

</div>

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

Answer 3

$(function() {

  $("#ham-icon").on("click", function(e) {

    $("#mySidenav").addClass("cstm-w");

    e.stopPropagation()

  });

  $(document).on("click", function(e) {

    if ($(e.target).is("#ham-icon") === false) {

      $("#mySidenav").removeClass("cstm-w");

    }

  });

});

.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 60px;

}

.sidenav a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

  transition: 0.3s;

}

.cstm-w {

  width: 250px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mySidenav" class="sidenav">

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Clients</a>

  <a href="#">Contact</a>

</div>

<span style="font-size:30px;cursor:pointer" id="ham-icon">&#9776; open</span>