純 CSS 移動漢堡菜單不會關閉 onClick 的鏈接

Question

我已經包含了漢堡包的 jquery/html/css 片段。 jquery 是我想用來在單擊其鏈接時關閉移動菜單的內容。 目前，您必須再次單擊 X（經過 css 轉換的跨度）才能這樣做，這很煩人而且一點也不好。 我已經在所有不同的 html 標簽中嘗試了 ID 和類，但似乎沒有任何效果。 任何正確方向的想法/提示？

 $(document).ready(function() { //took this code below from another SO answer that got good upvotes, and while I understand it easily, I can't figure out where to place it in the html...I fear that the CSS transforming and rendering of the menu is what is preventing this from working... $('.menu').on('click', function() { $('.menu').addClass('open'); }); $('.menu a').on("click", function() { $('.menu').removeClass('open'); }); });

 .sticky-navMobile { margin: 0; width: max-content; position: -webkit-sticky; position: sticky; top: 0; } #menuToggle { display: block; position: relative; top: 10px; left: 10px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #menuToggle a:hover { color: plum; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; } #menuToggle span { display: block; width: 33px; height: 4px; margin-right: 0px; margin-left: 0px; margin-bottom: 5px; position: relative; background: #722f58; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; color: #232323; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; color: #232323; } /** Transform all the slices of hamburger into an X. */ #menuToggle input:checked~span { background: rgb(146, 102, 146); opacity: 1; transform: rotate(45deg) translate(-2px, -1px); } #menuToggle input:checked~span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); background: rgb(146, 102, 146); } #menuToggle input:checked~span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); background: rgb(146, 102, 146); } #menu { position: absolute; width: 150px; margin: -37px 0 0 -10px; border-bottom-right-radius: 45px; padding-top: 40px; background: #722f58; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } #menu li { padding: 10px 0; font-size: 22px; } #menuToggle input:checked~ul { transform: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <nav class="sticky-navMobile"> <nav> <div id="menuToggle"> <,-- A fake / hidden checkbox is used as click receiver: so you can use the.checked selector on it.--> <input type="checkbox" /> <,-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. --> <span></span> <span></span> <span></span> <!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic.--> <ul id="menu"> <a href="#projects"> <li>Projects</li> </a> <a href="#bio"> <li>Personal Info</li> </a> <a href="#footer"> <li>Contact</li> </a> </ul> </div> </nav> </nav>

Answer 1

部分問題是open和close在這種情況下沒有任何意義，因為它是一個復選框導致菜單打開和關閉。

您需要做的是，當您單擊菜單或菜單中的錨點時向上遍歷 DOM，並獲得checked的復選框 state。 如果為真（因為菜單已打開），您將選中的 state 設置為false ，這將觸發菜單的 CSS。

 $(document).ready(function() { //took this code below from another SO answer that got good upvotes, and while I understand it easily, I can't figure out where to place it in the html...I fear that the CSS transforming and rendering of the menu is what is preventing this from working... $('#menu').on('click', function() { if ($(this).siblings('input').prop('checked')) { $(this).siblings('input').prop('checked', false); } }); $('#menu a').on("click", function() { if ($(this).parent('ul').siblings('input').prop('checked')) { $(this).siblings('input').prop('checked', false); } }); });

 .sticky-navMobile { margin: 0; width: max-content; position: -webkit-sticky; position: sticky; top: 0; } #menuToggle { display: block; position: relative; top: 10px; left: 10px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #menuToggle a:hover { color: plum; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; } #menuToggle span { display: block; width: 33px; height: 4px; margin-right: 0px; margin-left: 0px; margin-bottom: 5px; position: relative; background: #722f58; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; color: #232323; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; color: #232323; } /** Transform all the slices of hamburger into an X. */ #menuToggle input:checked~span { background: rgb(146, 102, 146); opacity: 1; transform: rotate(45deg) translate(-2px, -1px); } #menuToggle input:checked~span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); background: rgb(146, 102, 146); } #menuToggle input:checked~span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); background: rgb(146, 102, 146); } #menu { position: absolute; width: 150px; margin: -37px 0 0 -10px; border-bottom-right-radius: 45px; padding-top: 40px; background: #722f58; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } #menu li { padding: 10px 0; font-size: 22px; } #menuToggle input:checked~ul { transform: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <nav class="sticky-navMobile"> <nav> <div id="menuToggle"> <,-- A fake / hidden checkbox is used as click receiver: so you can use the.checked selector on it.--> <input type="checkbox" /> <,-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. --> <span></span> <span></span> <span></span> <!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic.--> <ul id="menu"> <a href="#projects"> <li>Projects</li> </a> <a href="#bio"> <li>Personal Info</li> </a> <a href="#footer"> <li>Contact</li> </a> </ul> </div> </nav> </nav>