如何创建自动隐藏侧边栏

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 {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 0;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; background-color: #111;&nbsp; &nbsp; overflow-x: hidden;&nbsp; &nbsp; transition: 0.5s;&nbsp; &nbsp; padding-top: 60px;}.sidenav a {&nbsp; &nbsp; padding: 8px 8px 8px 32px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; color: #818181;&nbsp; &nbsp; display: block;&nbsp; &nbsp; transition: 0.3s;}<script>function openNav() {&nbsp; &nbsp; document.getElementById("mySidenav").style.width = "250px";}window.addEventListener('click', function(e){&nbsp; &nbsp;&nbsp; if (!document.getElementById('mySidenav').contains(e.target) && !document.getElementById('myMenu').contains(e.target)){&nbsp; &nbsp; // Clicked in box&nbsp; &nbsp;document.getElementById("mySidenav").style.width = "0px";&nbsp;&nbsp;&nbsp; } else{&nbsp; &nbsp;&nbsp;// document.getElementById("mySidenav").style.width = "0px";&nbsp; }});</script><div id="mySidenav" class="sidenav">&nbsp; <a href="#">About</a>&nbsp; <a href="#">Services</a>&nbsp; <a href="#">Clients</a>&nbsp; <a href="#">Contact</a></div><span style="font-size:30px;cursor:pointer" id="myMenu" onclick="openNav()">&#9776; open</span>

Answer 2

你可以试试这样的<style>&nbsp; &nbsp; #mySidenav {&nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; }</style><script>&nbsp; document.body.addEventListener('click', function (e) {&nbsp; &nbsp; if (e.target.parentNode.id === 'mySidenav') {&nbsp; &nbsp; &nbsp; document.getElementById("mySidenav").style.display = "block";&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById("mySidenav").style.display = "none";&nbsp; }, true);&nbsp; function openNav() {&nbsp; &nbsp; document.getElementById("mySidenav").style.display = "block";&nbsp; }</script><div id="mySidenav" class="sidenav">&nbsp; &nbsp; <a href="#">About</a>&nbsp; &nbsp; <a href="#">Services</a>&nbsp; &nbsp; <a href="#">Clients</a>&nbsp; &nbsp; <a href="#">Contact</a></div><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

Answer 3

$(function() {&nbsp; $("#ham-icon").on("click", function(e) {&nbsp; &nbsp; $("#mySidenav").addClass("cstm-w");&nbsp; &nbsp; e.stopPropagation()&nbsp; });&nbsp; $(document).on("click", function(e) {&nbsp; &nbsp; if ($(e.target).is("#ham-icon") === false) {&nbsp; &nbsp; &nbsp; $("#mySidenav").removeClass("cstm-w");&nbsp; &nbsp; }&nbsp; });});.sidenav {&nbsp; height: 100%;&nbsp; width: 0;&nbsp; position: fixed;&nbsp; z-index: 1;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background-color: #111;&nbsp; overflow-x: hidden;&nbsp; transition: 0.5s;&nbsp; padding-top: 60px;}.sidenav a {&nbsp; padding: 8px 8px 8px 32px;&nbsp; text-decoration: none;&nbsp; font-size: 25px;&nbsp; color: #818181;&nbsp; display: block;&nbsp; transition: 0.3s;}.cstm-w {&nbsp; width: 250px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="mySidenav" class="sidenav">&nbsp; <a href="#">About</a>&nbsp; <a href="#">Services</a>&nbsp; <a href="#">Clients</a>&nbsp; <a href="#">Contact</a></div><span style="font-size:30px;cursor:pointer" id="ham-icon">&#9776; open</span>