如何在用户单击某个项目时关闭全屏菜单？ jquery

Question

所以我在 codepen 找到了这支笔，我在一个单页网站上练习它，但我不知道如何在单击 link（带锚点）时关闭全屏菜单links 到页面上的元素）。

(function($) {
  $(function() {
    $('.toggle-overlay').click(function() {
      $('aside').toggleClass('open');
    });
  });
})(jQuery);

body {
 background: RGBA(29, 20, 35, 1);
 font-family: 'Muli';
 -webkit-font-smoothing: antialiased;
}
main {
 padding: 60px 15px;
 text-align: center;
 max-width: 100%;
}
h1 {
 font-size: 2.5em;
 font-weight: 300;
 color: rgba(255, 255, 255, .9);
 margin: 0 0 10px;
}
@media screen and (min-width: 600px) {
 h1 {
  font-size: 3em;
 }
}
h2 {
 margin: 0 0 50px;
 font-size: 1.5em;
 font-weight: 200;
 color: rgba(255, 255, 255, .6);
}
aside {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: linear-gradient(200deg, #27156E, #6A2A88, #9F4981);
 opacity: 0;
 visibility: hidden;
 transition: all .5s ease;
 z-index: 2;
}
.open {
 opacity: 1;
 visibility: visible;
}
nav {
 text-align: center;
 height: 95vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
   align-items: center;
   flex: 1;
   line-height: 20vh;
   a {
        font-size: 1.5em;
    transition: all 0.5s ease;
    display: block;
    text-decoration: none;
    color: rgba(255, 255, 255, .5);
    &:hover {
     color: rgba(255, 255, 255, .9);
     transform: scale(1.1);
     &:before {
      visibility: visible;
      transform: scaleX(1);
     }
    }
    &:before {
     content: "";
     position: absolute;
     width: 50%;
     height: 2px;
     bottom: 0;
     left: 25%;
     background: white;
     visibility: hidden;
     transform: scaleX(0);
     transition: all 0.3s ease-in-out 0s;
    }
   }
  }
 }
}
@media screen and (min-width: 600px) {
  nav ul li a {
    font-size: 3em;
  }
}
button {
 padding: 15px 40px;
 background: transparent;
 border: 1px solid rgba(255, 255, 255, .4);
 color: white;
 border-radius: 8px;
 transition: all .5s ease;
 &:hover {
  border: 1px solid rgba(255, 255, 255, 1);
 }
}
.close {
 position: fixed;
 top: 40px;
 right: 60px;
 color: white;
 z-index: 3;
 cursor: pointer;
 font-family: sans-serif;
  span,
  span:before,
  span:after {
    border-radius: 4px;
    height: 5px;
    width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  span {
    background: transparent;
  }
  span:before {
  transform: rotate(45deg);
  }
  span:after {
  transform: rotate(-45deg);
  }
}
.outer-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 85px;
    height: 85px;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <h1>Full Screen Navigation Overlay</h1>
  <h2>An example of a full screen navigation overlay utilizing flexbox.</h2>
  <button class="toggle-overlay">Toggle Me</button>
</main>


<aside>
  <div class="outer-close toggle-overlay">
    <a class="close"><span></span></a>
  </div>
  <nav>
    <ul>
      <li><a href="#!">Features</a></li>
      <li><a href="#!">Pricing</a></li>
      <li><a href="#!">Documentation</a></li>
      <li><a href="#!">About</a></li>
    </ul>
  </nav>
</aside>

CODEPEN LINK: http://codepen.io/taniarascia/pen/yYrXRG

Answer 1

每个<li><a href="a.php" onclick="$('aside').removeClass('open');"></a></li>

使用这个

 <li><a href="#" onclick="$('aside').removeClass('open');">Features</a></li>

Answer 2

看到这个fiddle

如下更改您的 JS

(function($) {
  $(function() {
    $('.toggle-overlay').click(function() {
      $('aside').toggleClass('open');
    });
    $('aside nav li a').click(function() {
      $('aside').toggleClass('open');
    });
  });
})(jQuery);

我所做的是，在单击每个菜单项时，我将切换 aside。

如何在用户单击某个项目时关闭全屏菜单？ jquery

How do to close a fullscreen menu when user clicks on an item? jquery

html

navigation

jquery

frontend

看到这个fiddle