点击li项时如何自动关闭侧边栏

Question

How do I close the side bar when someone clicks on the any of the li element. I have tried the code menuSidebar.display = "none" in the event listener, but this doesn't seem to work

Thank you in advance

 const menuButton = document.querySelectorAll("li"); const menuSidebar = document.getElementById("mySidebar"); /* Set the width of the sidebar to 250px and the left margin of the page content to 250px */ function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */ function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; } // console.log(menuButton) // console.log(mySidebar) menuButton.addEventListener("click", ()=>{ menuSidebar.display = "none"; });

 :root { --title-font: "Titillium Web", sans-serif; --color-primary: #16e0bd; --color-secondary: #303030; --color-tertiary: #e0860b; --color-complimentary: #fc5817; --color-darkblack: #141414; --default: #ffffff; }.sidebar { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: var(--color-secondary); /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ } /* The sidebar links */.sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: var(--default); display: block; transition: 0.3s; } /* When you mouse over the navigation links, change their color */.sidebar a:hover { color: var(--color-primary); } /* Position and style the close button (top right corner) */.sidebar.closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* The button used to open the sidebar */.openbtn { font-size: 20px; cursor: pointer; padding: 10px 15px; border: none; box-shadow: 3px 3px var(--color-complimentary), -0.1em -0.1em 0.4em var(--color-complimentary); background: linear-gradient(var(--default), var(--color-primary)); color: var(--color-secondary); } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left 0.5s; /* If you want a transition effect */ padding: 20px; }

 <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <ul> <li><a href="#about-me">About Me</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#experience">Experience</a></li> <li><a href="#education"> Education </a></li> <li> <a href="#contact">Contact</a></li> </ul> </div> <div id="main"> <button class="openbtn" onclick="openNav()">&#9776; Open Menu</button> </div>

Answer 1

menuButton.addEventListener("click", ()=>{
  menuSidebar.display = "none";
});

Replace the above with this,

menuButton.forEach((button) => (button.onclick = () => closeNav()));

You have listen to each button to see if it's been clicked then simply execute closeNav() function