單擊按鈕時將元素移動到某個 position

Question

我創建了一個響應式移動導航欄，單擊該導航欄會從右側滑動鏈接。 但是，當單擊該導航欄上的列表項時，它將 go 到分配的部分，但不會隱藏停留在頁面頂部的導航欄。 單擊漢堡圖標確實會將導航欄滑回原位，但如果將列表項單擊到頁面的指定部分，則導航欄將保持在頂部。 我怎樣才能解決這個問題？ 導航欄截圖

 // Hamburger Menu $(document).ready(function() { $("#icon").click(function() { $('.nav-links').toggleClass("show"); }) })

 .nav-bar { background-color: #57595B; height: 40px; display: flex; align-items: center; position: sticky; top:0; z-index:5000; text-align: center; width:100%; }.nav-links{ top:0; display: flex; justify-content: space-around; right:0; text-align: center; margin:auto; margin-right: 30px; position:absolute; font-size:20px; padding-bottom:0; }.act:hover{ color:#00dbde; }.act:active { color: #00dbde; }.nav-links li{ margin:auto; list-style: none; padding:0px 18px; text-align: center; transition: 1s; }.nav-links a{ margin:auto; padding: 0px; text-decoration: none; color:white; text-align: center; transition: 1s; } /*Mobile Nav*/ #icon{ color:white; font-size: 30px; line-height: 30px; float:right; margin-right:20px; cursor: pointer; display:none; top:0; } /* Media Query */ @media screen and (max-width:480px){.image1, #logo-h1{ position: absolute; left:0; }.image1{ margin-top:10px; } #logo-h1{ margin-left:25px; }.nav-bar{ height:30px; } #icon{ display: block; right:0; float: right; position: absolute; top:0; }.nav-links{ position: absolute; width:97%; background: #3b6978; border-top-left-radius: 20%; border-bottom-left-radius: 20%; top:277px; right:-1200px; text-align: center; height:90vh; display:block; transition: all.7s; }.nav-links li{ display:block; display: inline-block; line-height: 60px; }.nav-links a{ font-size:20px; }.nav-links.show{ right:277px; }.logo-links{ width:100% }.skills-container{ width:100%; display: grid; grid-template-columns: 50% 50%; padding: 20px; }.contact-page{ height:90vh; }.contact-links{ width:100%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <.--Nav Bar--> <div class="nav-bar"> <div><img class="image1" src="/Images/Logo/LogoSymbol.png"></div> <div class="title1"> <h1 id="logo-h1">Botshelo Ramela</h1> <div class="desktop-nav"> <div class="links"> <ul class="nav-links"> <li class="lis"><a href="#" class="home links act" data-link="#homePage">Home</a></li> <li class="lis"><a href="#abt-me-link" class="about-me links act" data-link="#aboutMePage">About</a></li> <li class="lis"><a href="#split2" class="skills links act" data-link="#skillsPage">Skills</a></li> <li class="lis"><a href="#split4" class="contact-page links act" data-link="#contactPage">Contact</a></li> </ul> </div> </div> </div> <div class="mobile-nav"> <label id="icon"> <i class="fas fa-bars"></i> </label> </div> </div>

`

Answer 1

在這種情況下，您可以嘗試使用hide和show函數來隱藏和取消隱藏nav-links ，這里是一個示例：

 // Hamburger Menu $(document).ready(function() { $("#icon").click(function() { if($(".nav-links").css("display").= "none"){ $('.nav-links');hide(). }else{ $('.nav-links');show(); } }) })

 .nav-bar { background-color: #57595B; height: 40px; display: flex; align-items: center; position: sticky; top:0; z-index:5000; text-align: center; width:100%; }.nav-links{ top:0; display: flex; justify-content: space-around; right:0; text-align: center; margin:auto; margin-right: 30px; position:absolute; font-size:20px; padding-bottom:0; }.act:hover{ color:#00dbde; }.act:active { color: #00dbde; }.nav-links li{ margin:auto; list-style: none; padding:0px 18px; text-align: center; transition: 1s; }.nav-links a{ margin:auto; padding: 0px; text-decoration: none; color:white; text-align: center; transition: 1s; } /*Mobile Nav*/ /*#icon{ color:white; font-size: 30px; line-height: 30px; float:right; margin-right:20px; cursor: pointer; display:none; top:0; }*/ /* Media Query */ @media screen and (max-width:480px){.image1, #logo-h1{ position: absolute; left:0; }.image1{ margin-top:10px; } #logo-h1{ margin-left:25px; }.nav-bar{ height:30px; } #icon{ display: block; right:0; float: right; position: absolute; top:0; }.nav-links{ position: absolute; width:97%; background: #3b6978; border-top-left-radius: 20%; border-bottom-left-radius: 20%; top:277px; right:-1200px; text-align: center; height:90vh; display:block; transition: all.7s; }.nav-links li{ display:block; display: inline-block; line-height: 60px; }.nav-links a{ font-size:20px; }.nav-links.show{ right:277px; }.logo-links{ width:100% }.skills-container{ width:100%; display: grid; grid-template-columns: 50% 50%; padding: 20px; }.contact-page{ height:90vh; }.contact-links{ width:100%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <.--Nav Bar--> <div class="nav-bar"> <div><img class="image1" src="/Images/Logo/LogoSymbol.png"></div> <div class="title1"> <h1 id="logo-h1">Botshelo Ramela</h1> <div class="desktop-nav"> <div class="links"> <ul class="nav-links"> <li class="lis"><a href="#" class="home links act" data-link="#homePage">Home</a></li> <li class="lis"><a href="#abt-me-link" class="about-me links act" data-link="#aboutMePage">About</a></li> <li class="lis"><a href="#split2" class="skills links act" data-link="#skillsPage">Skills</a></li> <li class="lis"><a href="#split4" class="contact-page links act" data-link="#contactPage">Contact</a></li> </ul> </div> </div> </div> <div class="mobile-nav"> <label id="icon">test <i class="fas fa-bars"></i> </label> </div> </div>