纯 CSS 移动汉堡菜单不会因链接的 onClick 而关闭

pure CSS mobile hamburger menu doesnt close for onClick of links

我为汉堡包添加了 jquery/html/css 的片段。 jquery 是我想用来在单击其链接时关闭移动菜单的方法。目前,您必须再次单击 X(css-转换后的跨度)才能这样做,这很烦人而且一点也不好。我已经在所有不同的 html 标签中尝试了 ids 和 类,但似乎没有任何效果。 ideas/tips 方向正确吗?

$(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>

部分问题在于,openclose 在此上下文中没有任何意义,因为它是导致菜单打开和关闭的复选框。

您需要做的是,当您单击菜单或菜单中的锚点时向上遍历 DOM,并获得复选框的 checked 状态。如果为真(因为菜单已打开),您将选中状态设置为 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>