在移动设备上，我希望在单击 ID 时关闭导航栏

Question

I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).

I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.

 $(document).ready(function(){ $(window).scroll(function(){ if($(document).scrollTop()>130){ $(".nav-btn").addClass("fundal") } else{ $(".nav-btn").removeClass("fundal") } }); }); window.addEventListener('load', ()=> { const preload = document.querySelector('.preload'); preload.classList.add('preload-finish'); }); $("ul").click(function () { $(".nav-wrapper").toggleClass(".nav-btn"); })

 /* NAVBAR */ .navigatie{ background-color:transparent; width:100%; position: absolute;; z-index: 99; margin:0px; padding:0px; } .logo { float: left; padding: 8px; margin-left: 40px; margin-top: 8px; } .navbar-brand{ color:white !important; } .navbar-brand img{ width: auto; height: 100px; margin:-32px 0px -25px 0px; } nav ul { float: right; list-style-type: none; padding-top:5px; margin-right:20px; } nav ul li { float: left; } nav ul li:not(:first-child) { margin-left: 48px; } nav ul li:last-child { margin-right: 24px; } nav ul li a { display: inline-block; outline: none; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 16px; letter-spacing: 1.1px; font-weight: 700; } nav ul li a:hover{ color:#fff; text-decoration: underline; } /* FUNDAL JS */ .fundal{ background:#e04f45 !important; box-shadow:1px 2px 4px 0px #00000075 !important; } .fundal .nav-btn { background-color:#e04f45; border-radius: 50%; box-shadow:1px 2px 4px 0px #00000075; } .fundal .nav-btn i{ background: #fff; border-radius: 2px; } #nav:checked + .nav-btn { transform: rotate(45deg); background-color: #e04f45; } #nav:checked + .nav-btn i { background: #fff; transition: transform 0.2s ease; } #nav:checked + .nav-btn i:nth-child(1) { transform: translateY(6px) rotate(180deg); } #nav:checked + .nav-btn i:nth-child(2) { opacity: 0; } #nav:checked + .nav-btn i:nth-child(3) { transform: translateY(-6px) rotate(90deg); } #nav:checked ~ .nav-wrapper { z-index: 9990; display:block } #nav:checked ~ .nav-wrapper ul li a { opacity: 1; transform: translateX(0); } .hidden { display: none; } /* MEDIA SCREEN NAVBAR PTR TLF */ @media only screen and (max-width: 991px){ .navigatie{ background-color:transparent; width:100%; position: absolute; z-index: 99; margin:0px; padding:0px; } .navbar-brand img{ height:100px; margin:-20px 0px 0px 0px; } .nav-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #fff; display:none; transition: all 0.2s ease; } .nav-wrapper ul { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .nav-wrapper ul li { display: block; float: none; width: 100%; text-align: center; padding-top:10px; margin-bottom: 10px; } .nav-wrapper ul li:not(:first-child) { margin-left: 0; } .nav-wrapper ul li a { padding: 10px 24px; opacity: 0; color: #000; font-size: 14px; font-weight: 600; letter-spacing: 1.2px; transform: translateX(-20px); transition: all 0.2s ease; } .nav-btn { position: fixed; right: 30px; top: 28px; display: block; width: 47px; height: 46px; cursor: pointer; z-index: 9999; border-radius: 50%; } .nav-btn i { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; margin-left: 14px; } .nav-btn i:nth-child(1) { margin-top: 16px; } .nav-btn i:nth-child(2) { margin-top: 4px; opacity: 1; } .nav-btn i:nth-child(3) { margin-top: 4px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="navigatie"> <nav> <input type="checkbox" id="nav" class="hidden"> <label for="nav" class="nav-btn"> <i></i> <i></i> <i></i> </label> <div class="nav-wrapper"> <ul> <li><a href="index.php">Acasă</a></li> <li><a href="#despre">Despre</a></li> <li><a href="#studii">Studii</a></li> <li><a href="#abilitati">Skills</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav> </div>

Answer 1

You could do that by changing a small thing in your JavaScript. Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function

Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery

 $(document).ready(function () { $(window).scroll(function () { console.log($(document).scrollTop()); if ($(document).scrollTop() > 130) { $(".nav-btn").addClass("fundal"); console.log("add class", $(".nav-btn").hasClass("fundal")); } else { $(".nav-btn").removeClass("fundal"); console.log("remove class"); } }); }); window.addEventListener("load", () => { const preload = document.querySelector(".preload"); preload.classList.add("preload-finish"); }); // Updated the selector $(".nav-wrapper li a").click(function () { $(".nav-wrapper").toggleClass(".nav-btn"); // Uncheck your checkbox $("#nav").prop("checked", false) });

 .page { background: #f00; height: 500px; margin-bottom: 10px; } /* NAVBAR */ .navigatie { background-color: transparent; width: 100%; position: absolute; z-index: 99; margin: 0px; padding: 0px; } .logo { float: left; padding: 8px; margin-left: 40px; margin-top: 8px; } .navbar-brand { color: white !important; } .navbar-brand img { width: auto; height: 100px; margin: -32px 0px -25px 0px; } nav ul { float: right; list-style-type: none; padding-top: 5px; margin-right: 20px; } nav ul li { float: left; } nav ul li:not(:first-child) { margin-left: 48px; } nav ul li:last-child { margin-right: 24px; } nav ul li a { display: inline-block; outline: none; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 16px; letter-spacing: 1.1px; font-weight: 700; } nav ul li a:hover { color: #fff; text-decoration: underline; } /* FUNDAL JS */ .fundal { background: #e04f45 !important; box-shadow: 1px 2px 4px 0px #00000075 !important; } .fundal.nav-btn { background-color: #e04f45; border-radius: 50%; box-shadow: 1px 2px 4px 0px #00000075; } .fundal.nav-btn i { background: #fff; border-radius: 2px; } #nav:checked + .nav-btn { transform: rotate(45deg); background-color: #e04f45; } #nav:checked + .nav-btn i { background: #fff; transition: transform 0.2s ease; } #nav:checked + .nav-btn i:nth-child(1) { transform: translateY(6px) rotate(180deg); } #nav:checked + .nav-btn i:nth-child(2) { opacity: 0; } #nav:checked + .nav-btn i:nth-child(3) { transform: translateY(-6px) rotate(90deg); } #nav:checked ~ .nav-wrapper { z-index: 9990; display: block; } #nav:checked ~ .nav-wrapper ul li a { opacity: 1; transform: translateX(0); } .hidden { display: none; } /* MEDIA SCREEN NAVBAR PTR TLF */ @media only screen and (max-width: 991px) { .navigatie { background-color: transparent; width: 100%; position: absolute; z-index: 99; margin: 0px; padding: 0px; } .navbar-brand img { height: 100px; margin: -20px 0px 0px 0px; } .nav-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #fff; display: none; transition: all 0.2s ease; } .nav-wrapper ul { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .nav-wrapper ul li { display: block; float: none; width: 100%; text-align: center; padding-top: 10px; margin-bottom: 10px; } .nav-wrapper ul li:not(:first-child) { margin-left: 0; } .nav-wrapper ul li a { padding: 10px 24px; opacity: 0; color: #000; font-size: 14px; font-weight: 600; letter-spacing: 1.2px; transform: translateX(-20px); transition: all 0.2s ease; } .nav-btn { position: fixed; right: 30px; top: 28px; display: block; width: 47px; height: 46px; cursor: pointer; z-index: 9999; border-radius: 50%; } .nav-btn i { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; margin-left: 14px; } .nav-btn i:nth-child(1) { margin-top: 16px; } .nav-btn i:nth-child(2) { margin-top: 4px; opacity: 1; } .nav-btn i:nth-child(3) { margin-top: 4px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="preload"></div> <div class="navigatie"> <nav> <input type="checkbox" id="nav" class="hidden"> <label for="nav" class="nav-btn"> <i></i> <i></i> <i></i> </label> <div class="nav-wrapper"> <ul> <li><a href="#home">Acasă</a></li> <li><a href="#despre">Despre</a></li> <li><a href="#studii">Studii</a></li> <li><a href="#abilitati">Skills</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav> </div> <div class="page" id="home"></div> <div class="page" id="despre"></div> <div class="page" id="studii"></div> <div class="page" id="abilitati"></div> <div class="page" id="contact"></div>