单击时关闭导航容器而不隐藏它

Question

所以，我有一个导航栏，当宽度最大为 560px 时，移动设备上会出现汉堡菜单。我想做的是，当我单击 a : li a href （例如关于）时，我想关闭导航容器，而不是让它消失。有没有办法做到这一点？

另外我希望这只适用于最大宽度 560px。

Answer 1

const ul = document.getElementsByTagName('ul')[0];ul.addEventListener('click', () => {&nbsp; const data = document.getElementById('nav');&nbsp; data.checked = false})/*--------------------------------FONTS---------------------------------*/@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');/*--------------------------------RESET---------------------------------*/* {&nbsp; font-family: 'Noto Sans', sans-serif;}html,body {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; scroll-behavior: smooth;}/*--------------------------------GLOBAL---------------------------------*/p {&nbsp; color: #767676;&nbsp; line-height: 23px;&nbsp; font-family: 'Nunito', sans-serif;}.btn {&nbsp; color: #fff;&nbsp; padding: 30px 60px;&nbsp; font-size: 20px;&nbsp; letter-spacing: 3px;&nbsp; font-weight: 500;&nbsp; background-color: #daa37f;&nbsp; border-radius: 20px;&nbsp; text-align: center;&nbsp; text-transform: uppercase;&nbsp; border-bottom: 5px solid #a37a60;}.btn--opacity {&nbsp; animation: opacity 3s;}/*--------------------------------NAVIGATION BAR---------------------------------*/nav {&nbsp; background: rgb(0, 0, 0);&nbsp; background: rgb(108, 108, 108);&nbsp; background: linear-gradient(90deg, rgba(108, 108, 108, 1) 0%, rgba(78, 78, 78, 1) 35%, rgba(73, 73, 73, 1) 78%, rgba(29, 29, 29, 1) 100%);&nbsp; height: 60px;&nbsp; padding-right: 100px;}nav ul {&nbsp; float: right;}nav ul li {&nbsp; display: inline-block;&nbsp; float: left;}nav ul li:not(:first-child) {&nbsp; margin-left: 25px;}nav ul li a {&nbsp; display: inline-block;&nbsp; outline: none;&nbsp; color: white;&nbsp; font-size: 16px;&nbsp; text-decoration: none;&nbsp; letter-spacing: 0.04em;}nav ul li a:hover {&nbsp; color: #d7a256;&nbsp; text-decoration: none;}@media screen and (max-width: 560px) {&nbsp; .nav-container {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; z-index: -1;&nbsp; &nbsp; background: #1f2227;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transition: all 0.2s ease;&nbsp; }&nbsp; .nav-container ul {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; transform: translateY(-50%);&nbsp; &nbsp; width: 100%;&nbsp; }&nbsp; .nav-container ul li {&nbsp; &nbsp; display: block;&nbsp; &nbsp; float: none;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; text-align: right;&nbsp; &nbsp; margin-bottom: 10px;&nbsp; }&nbsp; .nav-container ul li:nth-child(1) a {&nbsp; &nbsp; transition-delay: 0.2s;&nbsp; }&nbsp; .nav-container ul li:nth-child(2) a {&nbsp; &nbsp; transition-delay: 0.3s;&nbsp; }&nbsp; .nav-container ul li:nth-child(3) a {&nbsp; &nbsp; transition-delay: 0.4s;&nbsp; }&nbsp; .nav-container ul li:nth-child(4) a {&nbsp; &nbsp; transition-delay: 0.5s;&nbsp; }&nbsp; .nav-container ul li:not(:first-child) {&nbsp; &nbsp; margin-left: 0;&nbsp; }&nbsp; .nav-container ul li a {&nbsp; &nbsp; padding: 10px 25px;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; font-size: 24px;&nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; transform: translateY(-20px);&nbsp; &nbsp; transition: all 0.2s ease;&nbsp; }&nbsp; .nav-open {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; right: 10px;&nbsp; &nbsp; top: 10px;&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 48px;&nbsp; &nbsp; height: 48px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; z-index: 9999;&nbsp; &nbsp; border-radius: 50%;&nbsp; }&nbsp; .nav-open i {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; height: 2px;&nbsp; &nbsp; background: white;&nbsp; &nbsp; border-radius: 2px;&nbsp; &nbsp; margin-left: 14px;&nbsp; }&nbsp; .nav-open i:nth-child(1) {&nbsp; &nbsp; margin-top: 16px;&nbsp; }&nbsp; .nav-open i:nth-child(2) {&nbsp; &nbsp; margin-top: 4px;&nbsp; &nbsp; opacity: 1;&nbsp; }&nbsp; .nav-open i:nth-child(3) {&nbsp; &nbsp; margin-top: 4px;&nbsp; }}#nav:checked+.nav-open {&nbsp; transform: rotate(45deg);}#nav:checked+.nav-open i {&nbsp; background: #fff;&nbsp; transition: transform 0.2s ease;}#nav:checked+.nav-open i:nth-child(1) {&nbsp; transform: translateY(6px) rotate(180deg);}#nav:checked+.nav-open i:nth-child(2) {&nbsp; opacity: 0;}#nav:checked+.nav-open i:nth-child(3) {&nbsp; transform: translateY(-6px) rotate(90deg);}#nav:checked~.nav-container {&nbsp; z-index: 9990;&nbsp; opacity: 1;}#nav:checked~.nav-container ul li a {&nbsp; opacity: 1;&nbsp; transform: translateY(0);}.hidden {&nbsp; display: none;}.mt-5,.my-5 {&nbsp; margin-top: 0rem !important;}/*--------------------------------BANNER---------------------------------*/.banner {&nbsp; background-image: url('../img/banner.jpg');&nbsp; background-position: center;&nbsp; background-size: cover;&nbsp; background-attachment: fixed;&nbsp; display: table;&nbsp; width: 100%;&nbsp; height: 93%;&nbsp; position: relative;}.banner_overlay {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; display: table;&nbsp; height: 100%;&nbsp; text-align: center;}.banner_container {&nbsp; display: table-cell;&nbsp; vertical-align: middle;}.banner_scroll-down {&nbsp; position: absolute;&nbsp; bottom: 15px;&nbsp; left: 50%;&nbsp; margin-left: -12px;&nbsp; cursor: pointer;&nbsp; animation: MoveUpDown 1s linear infinite;}/*--------------------------------BANNER ANIMATION---------------------------------*/@keyframes MoveUpDown {&nbsp; 0%,&nbsp; 100% {&nbsp; &nbsp; bottom: 0;&nbsp; }&nbsp; 50% {&nbsp; &nbsp; bottom: 10px;&nbsp; }}@keyframes fadeInUp {&nbsp; from {&nbsp; &nbsp; transform: translate3d(0, 40px, 0)&nbsp; }&nbsp; to {&nbsp; &nbsp; transform: translate3d(0, 0, 0);&nbsp; &nbsp; opacity: 1&nbsp; }}@-webkit-keyframes fadeInUp {&nbsp; from {&nbsp; &nbsp; transform: translate3d(0, 40px, 0)&nbsp; }&nbsp; to {&nbsp; &nbsp; transform: translate3d(0, 0, 0);&nbsp; &nbsp; opacity: 1&nbsp; }}.animated {&nbsp; animation-duration: 1s;&nbsp; animation-fill-mode: both;&nbsp; -webkit-animation-duration: 1s;&nbsp; -webkit-animation-fill-mode: both}.animatedFadeInUp {&nbsp; opacity: 0}.fadeInUp {&nbsp; opacity: 0;&nbsp; animation-name: fadeInUp;&nbsp; -webkit-animation-name: fadeInUp;}/*--------------------------------Carpusel Gallery---------------------------------*/.w-100 {&nbsp; object-fit: cover;}/*--------------------------------MENU SECTION---------------------------------*/#menu {&nbsp; min-height: 100vh;&nbsp; width: 100%;&nbsp; background-color: white;}.menu_title {&nbsp; text-align: center;&nbsp; padding-top: 150px;&nbsp; font-size: 70px;&nbsp; font-weight: 800;&nbsp; opacity: 50%;&nbsp; color: #dfaf6b;}.menu_titleb {&nbsp; text-align: center;&nbsp; padding-top: 65px;&nbsp; font-size: 40px;&nbsp; font-weight: 900;&nbsp; color: #dfaf6b;}/*--------------------------------Image Menu Lightbox---------------------------------*/a.lightbox img {&nbsp; position: fixed;&nbsp; scroll-behavior: none;&nbsp; height: 150px;&nbsp; border: 3px solid white;&nbsp; box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);&nbsp; margin: 94px 20px 20px 20px;}/* Styles the lightbox, removes it from sight and adds the fade-in transition */.lightbox-target {&nbsp; z-index: 16;&nbsp; position: fixed;&nbsp; top: -100%;&nbsp; width: 100%;&nbsp; background: rgba(0, 0, 0, .7);&nbsp; width: 100%;&nbsp; opacity: 0;&nbsp; -webkit-transition: opacity .5s ease-in-out;&nbsp; -moz-transition: opacity .5s ease-in-out;&nbsp; -o-transition: opacity .5s ease-in-out;&nbsp; transition: opacity .5s ease-in-out;&nbsp; overflow: hidden;}/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */.lightbox-target img {&nbsp; margin: auto;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; max-height: 0%;&nbsp; max-width: 0%;&nbsp; border: 3px solid white;&nbsp; box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);&nbsp; box-sizing: border-box;&nbsp; -webkit-transition: .5s ease-in-out;&nbsp; -moz-transition: .5s ease-in-out;&nbsp; -o-transition: .5s ease-in-out;&nbsp; transition: .5s ease-in-out;}/* Styles the close link, adds the slide down transition */a.lightbox-close {&nbsp; display: block;&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; box-sizing: border-box;&nbsp; background: white;&nbsp; color: black;&nbsp; text-decoration: none;&nbsp; position: absolute;&nbsp; top: -80px;&nbsp; right: 0;&nbsp; -webkit-transition: .5s ease-in-out;&nbsp; -moz-transition: .5s ease-in-out;&nbsp; -o-transition: .5s ease-in-out;&nbsp; transition: .5s ease-in-out;}/* Provides part of the "X" to eliminate an image from the close link */a.lightbox-close:before {&nbsp; content: "";&nbsp; display: block;&nbsp; height: 30px;&nbsp; width: 1px;&nbsp; background: black;&nbsp; position: absolute;&nbsp; left: 26px;&nbsp; top: 10px;&nbsp; -webkit-transform: rotate(45deg);&nbsp; -moz-transform: rotate(45deg);&nbsp; -o-transform: rotate(45deg);&nbsp; transform: rotate(45deg);}/* Provides part of the "X" to eliminate an image from the close link */a.lightbox-close:after {&nbsp; content: "";&nbsp; display: block;&nbsp; height: 30px;&nbsp; width: 1px;&nbsp; background: black;&nbsp; position: absolute;&nbsp; left: 26px;&nbsp; top: 10px;&nbsp; -webkit-transform: rotate(-45deg);&nbsp; -moz-transform: rotate(-45deg);&nbsp; -o-transform: rotate(-45deg);&nbsp; transform: rotate(-45deg);}/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */.lightbox-target:target {&nbsp; opacity: 1;&nbsp; top: 0;&nbsp; bottom: 0;}.lightbox-target:target img {&nbsp; max-height: 100%;&nbsp; max-width: 100%;}.lightbox-target:target a.lightbox-close {&nbsp; top: 0px;}/*--------------------------------MENU SECTION IMAGE GRID---------------------------------*/.container {&nbsp; padding: 5rem 0rem;}.img-wrapper-20 {&nbsp; margin: 0rem 1.5rem 0rem 0rem;&nbsp; transition: transform .2s;}.img-wrapper-20 img:hover {&nbsp; transform: scale(1.08);}.img-dimension {&nbsp; max-width: 100%;}@media screen and (max-width: 1000px) {&nbsp; .d-flex {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; overflow: auto;&nbsp; }&nbsp; .img-wrapper-20 {&nbsp; &nbsp; max-width: 80%;&nbsp; &nbsp; margin: 0rem 1.5rem 0rem 0rem;&nbsp; }}.galp {&nbsp; margin-top: 20px;&nbsp; text-align: center;&nbsp; font-size: 20px;&nbsp; font-weight: 700;&nbsp; color: black;}.buttonn {&nbsp; text-align: center;}/*--------------------------------Footer---------------------------------*/ul {&nbsp; margin: 0px;&nbsp; padding: 0px;}.footer-section {&nbsp; background-image: url('../img/banner-down.jpg');&nbsp; background-position: center;&nbsp; background-size: cover;&nbsp; background-attachment: fixed;&nbsp; position: relative;}.footer-cta {&nbsp; border-bottom: 1px solid #373636;}.single-cta i {&nbsp; color: #d4a253;&nbsp; font-size: 30px;&nbsp; float: left;&nbsp; margin-top: 8px;}.cta-text {&nbsp; padding-left: 15px;&nbsp; display: inline-block;}.cta-text h4 {&nbsp; color: #fff;&nbsp; font-size: 20px;&nbsp; font-weight: 700;&nbsp; margin-bottom: 2px;}.cta-text h2 {&nbsp; color: #fff;&nbsp; font-size: 25px;&nbsp; font-weight: 600;}.cta-text span {&nbsp; color: #f4dcb6;&nbsp; font-size: 15px;&nbsp; font-weight: 900;}.footer-content {&nbsp; position: relative;&nbsp; z-index: 2;}.footer-pattern img {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 330px;&nbsp; background-size: cover;&nbsp; background-position: 100% 100%;}.footer-logo {&nbsp; margin-bottom: 30px;}.footer-logo img {&nbsp; max-width: 200px;}.footer-text p {&nbsp; margin-bottom: 14px;&nbsp; font-size: 16px;&nbsp; color: #f4dcb6;&nbsp; line-height: 28px;}.footer-social-icon span {&nbsp; color: #fff;&nbsp; display: block;&nbsp; font-size: 20px;&nbsp; font-weight: 700;&nbsp; margin-bottom: 20px;}.footer-social-icon a {&nbsp; color: #fff;&nbsp; font-size: 16px;&nbsp; margin-right: 15px;}.footer-social-icon i {&nbsp; height: 40px;&nbsp; width: 40px;&nbsp; text-align: center;&nbsp; line-height: 38px;&nbsp; border-radius: 50%;}.facebook-bg {&nbsp; background: #3B5998;}.instagram-bg {&nbsp; background: #9254a9;}.footer-widget-heading h3 {&nbsp; color: #fff;&nbsp; font-size: 20px;&nbsp; font-weight: 600;&nbsp; margin-bottom: 40px;&nbsp; position: relative;}.footer-widget-heading h3::before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; left: 0;&nbsp; bottom: -15px;&nbsp; height: 2px;&nbsp; width: 50px;&nbsp; background: #ff5e14;}.footer-widget ul li {&nbsp; display: inline-block;&nbsp; float: left;&nbsp; width: 50%;&nbsp; margin-bottom: 12px;}.footer-widget ul li a:hover {&nbsp; color: #ff5e14;}.footer-widget ul li a {&nbsp; color: #878787;&nbsp; text-transform: capitalize;}.subscribe-form {&nbsp; position: relative;&nbsp; overflow: hidden;}.subscribe-form input {&nbsp; width: 100%;&nbsp; padding: 14px 28px;&nbsp; background: #2E2E2E;&nbsp; border: 1px solid #2E2E2E;&nbsp; color: #fff;}.subscribe-form button {&nbsp; position: absolute;&nbsp; right: 0;&nbsp; background: #ff5e14;&nbsp; padding: 13px 20px;&nbsp; border: 1px solid #ff5e14;&nbsp; top: 0;}.subscribe-form button i {&nbsp; color: #fff;&nbsp; font-size: 22px;&nbsp; transform: rotate(-6deg);}.align-items-center {&nbsp; -ms-flex-align: center!important;&nbsp; align-items: center!important;}.d-flex {&nbsp; display: -ms-flexbox!important;&nbsp; display: flex!important;}.buttonn {&nbsp; margin-bottom: 80px;}@media screen and (max-width: 1000px) {&nbsp; .buttonn {&nbsp; &nbsp; margin-bottom: 80px;&nbsp; &nbsp; margin-right: 22px;&nbsp; }}.map-container-3 {&nbsp; overflow: auto;&nbsp; padding-bottom: 16.25%;&nbsp; position: relative;&nbsp; height: 30%;}.map-container-3 iframe {&nbsp; left: 0;&nbsp; top: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; position: absolute;}<!DOCTYPE html><html dir="ltr"><head>&nbsp; <meta charset="utf-8">&nbsp; <title></title>&nbsp; <link rel="stylesheet" href="master.css"></head><body>&nbsp; <nav>&nbsp; &nbsp; <input type="checkbox" id="nav" class="hidden" />&nbsp; &nbsp; <label for="nav" class="nav-open"><i></i><i></i><i></i></label>&nbsp; &nbsp; <div class="nav-container">&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#home" style="color:#d7a256">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#about">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#gallery">Gallery</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#menu">Menu</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#footer">Find us</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </nav></body></html>