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

Question

我提供了汉堡包的jquery / html / css片段。 jQuery是我想用来在单击其链接时关闭移动菜单的工具。当前，您必须再次单击X（css转换的跨度）来进行此操作，这很烦人而且一点也不好。我已经尝试在所有不同的html标记中使用id和class，但似乎没有任何效果。任何正确方向的想法/提示？

$(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状态。如果为true（这是因为菜单处于打开状态），则将选中状态设置为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>