導航菜單不關閉

Question

我遇到了導航菜單的代碼。 這個導航菜單的問題是，當我點擊任何菜單項時，菜單成功地將我們帶到所需的鏈接，但不會自行關閉。 這是一個覆蓋導航菜單。 與本帖相關的問題，請發表評論。 並提前致謝！！

 $('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay5').toggleClass('open'); });

 .button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }.button_container:hover { opacity: 0.7; }.button_container.active.top { transform: translateY(10px) translateX(0) rotate(45deg); background: #fff; }.button_container.active.middle { opacity: 0; background: #fff; }.button_container.active.bottom { transform: translateY(-10px) translateX(0) rotate(-45deg); background: #fff; }.button_container span { background: #0087cc; border: none; height: 5px; width: 100%; position: absolute; top: 0px; left: 0; transition: all 0.35s ease; cursor: pointer; }.button_container span:nth-of-type(2) { top: 10px; }.button_container span:nth-of-type(3) { top: 20px; }.overlay5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, width 0.35s; z-index: 50; }.overlay5:before { content: ''; background: black; left: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: left 0.35s ease; }.overlay5:after { content: ''; background: black; right: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: all 0.35s ease; }.overlay5.open { visibility: visible; height: 100%; }.overlay5.open:before { left: 0; }.overlay5.open:after { right: 0; }.overlay5.open li { animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s; }.overlay5.open li:nth-of-type(2) { animation-delay: 0.45s; }.overlay5.open li:nth-of-type(3) { animation-delay: 0.55s; }.overlay5.open li:nth-of-type(4) { animation-delay: 0.65s; }.overlay5 nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 30px; font-family: 'Nova'; font-weight: 400; text-align: center; z-index: 100; }.overlay5 ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; }.overlay5 ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; }.overlay5 ul li a { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after { width: 100%; }.overlay5 ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #fff; transition: 0.35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay5" id="overlay5"> <nav class="overlay-menu"> <ul> <li><a class="smoothscroll1" href="#">Home</a></li> <li><a class="smoothscroll2" href="#about">About</a></li> <li><a class="smoothscroll3" href="#work">Work</a></li> <li><a class="smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>

Answer 1

您沒有任何代碼告訴導航隱藏。 我將此添加到您的js中：

$('a').click(function() {
   $('#toggle').toggleClass('active');
   $('#overlay5').toggleClass('open');
});

一個更好的方法是添加一個 class 到所有基於導航的<a>標簽和 select class 而不是<a>標簽的其他部分，因為您的項目的其他部分可能有<a>標簽。

所以這可能看起來像這樣：

$('a.myClass').click(function() {
   $('#toggle').toggleClass('active');
   $('#overlay5').toggleClass('open');
});

然后您的 html 可能如下所示：

   <li><a class="myClass smoothscroll1" href="#">Home</a></li>
   <li><a class="myClass smoothscroll2" href="#about">About</a></li>
   <li><a class="myClass smoothscroll3" href="#work">Work</a></li>
   <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>

這是一個工作片段，顯示了簡化的<a>標記選擇版本：

 $('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay5').toggleClass('open'); }); $('a').click(function() { $('#toggle').toggleClass('active'); $('#overlay5').toggleClass('open'); });

 .button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }.button_container:hover { opacity: 0.7; }.button_container.active.top { transform: translateY(10px) translateX(0) rotate(45deg); background: #fff; }.button_container.active.middle { opacity: 0; background: #fff; }.button_container.active.bottom { transform: translateY(-10px) translateX(0) rotate(-45deg); background: #fff; }.button_container span { background: #0087cc; border: none; height: 5px; width: 100%; position: absolute; top: 0px; left: 0; transition: all 0.35s ease; cursor: pointer; }.button_container span:nth-of-type(2) { top: 10px; }.button_container span:nth-of-type(3) { top: 20px; }.overlay5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, width 0.35s; z-index: 50; }.overlay5:before { content: ''; background: black; left: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: left 0.35s ease; }.overlay5:after { content: ''; background: black; right: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: all 0.35s ease; }.overlay5.open { visibility: visible; height: 100%; }.overlay5.open:before { left: 0; }.overlay5.open:after { right: 0; }.overlay5.open li { animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s; }.overlay5.open li:nth-of-type(2) { animation-delay: 0.45s; }.overlay5.open li:nth-of-type(3) { animation-delay: 0.55s; }.overlay5.open li:nth-of-type(4) { animation-delay: 0.65s; }.overlay5 nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 30px; font-family: 'Nova'; font-weight: 400; text-align: center; z-index: 100; }.overlay5 ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; }.overlay5 ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; }.overlay5 ul li a { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after { width: 100%; }.overlay5 ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #fff; transition: 0.35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay5" id="overlay5"> <nav class="overlay-menu"> <ul> <li><a class="smoothscroll1" href="#">Home</a></li> <li><a class="smoothscroll2" href="#about">About</a></li> <li><a class="smoothscroll3" href="#work">Work</a></li> <li><a class="smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>

這是更靈活、基於類的版本：

 $('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay5').toggleClass('open'); }); $('a.myClass').click(function() { $('#toggle').toggleClass('active'); $('#overlay5').toggleClass('open'); });

 .button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }.button_container:hover { opacity: 0.7; }.button_container.active.top { transform: translateY(10px) translateX(0) rotate(45deg); background: #fff; }.button_container.active.middle { opacity: 0; background: #fff; }.button_container.active.bottom { transform: translateY(-10px) translateX(0) rotate(-45deg); background: #fff; }.button_container span { background: #0087cc; border: none; height: 5px; width: 100%; position: absolute; top: 0px; left: 0; transition: all 0.35s ease; cursor: pointer; }.button_container span:nth-of-type(2) { top: 10px; }.button_container span:nth-of-type(3) { top: 20px; }.overlay5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, width 0.35s; z-index: 50; }.overlay5:before { content: ''; background: black; left: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: left 0.35s ease; }.overlay5:after { content: ''; background: black; right: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: all 0.35s ease; }.overlay5.open { visibility: visible; height: 100%; }.overlay5.open:before { left: 0; }.overlay5.open:after { right: 0; }.overlay5.open li { animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s; }.overlay5.open li:nth-of-type(2) { animation-delay: 0.45s; }.overlay5.open li:nth-of-type(3) { animation-delay: 0.55s; }.overlay5.open li:nth-of-type(4) { animation-delay: 0.65s; }.overlay5 nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 30px; font-family: 'Nova'; font-weight: 400; text-align: center; z-index: 100; }.overlay5 ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; }.overlay5 ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; }.overlay5 ul li a { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after { width: 100%; }.overlay5 ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #fff; transition: 0.35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay5" id="overlay5"> <nav class="overlay-menu"> <ul> <li><a class="myClass smoothscroll1" href="#">Home</a></li> <li><a class="myClass smoothscroll2" href="#about">About</a></li> <li><a class="myClass smoothscroll3" href="#work">Work</a></li> <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>