40840


フルスクリーンハンバーガーメニューで、  
ページ内リンクの場合にメニューを閉じるにはどうしたらいいのでしょうか？

[code]

    $('#toggle').click(function() {
       $(this).toggleClass('active');
       $('#overlay').toggleClass('open');})
[/code]

[code]

    .button_container {
      position: fixed;
      top: 5%;
      right: 2%;
      height: 27px;
      width: 35px;
      cursor: pointer;
      z-index: 100;
      -webkit-transition: opacity 0.25s ease;
      transition: opacity 0.25s ease;
    }
    
    .button_container.close {
      position: fixed;
      top: 5%;
      right: 2%;
      height: 27px;
      width: 35px;
      cursor: pointer;
      z-index: 100;
      -webkit-transition: opacity 0.25s ease;
      transition: opacity 0.25s ease;
    }
    
    .button_container:hover {
      opacity: 0.7;
    }
    .button_container.active .top {
      -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
              transform: translateY(11px) translateX(0) rotate(45deg);
      background: #fff;
    }
    .button_container.active .middle {
      opacity: 0;
      background: #fff;
    }
    .button_container.active .bottom {
      -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
              transform: translateY(-11px) translateX(0) rotate(-45deg);
      background: #fff;
    }
    .button_container span {
      background: #fe5d86;
      border: none;
      height: 5px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      cursor: pointer;
    }
    .button_container span:nth-of-type(2) {
      top: 11px;
    }
    .button_container span:nth-of-type(3) {
      top: 22px;
    }
    
    .overlay {
      position: fixed;
      background: #fe5d86;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.35s, visibility 0.35s, height 0.35s;
      transition: opacity 0.35s, visibility 0.35s, height 0.35s;
      overflow: hidden;
    }
    
    .overlay.close {
      position: fixed;
      background: #fe5d86;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.35s, visibility 0.35s, height 0.35s;
      transition: opacity 0.35s, visibility 0.35s, height 0.35s;
      overflow: hidden;
    }
    
    .overlay.open {
      opacity: 0.9;
      visibility: visible;
      height: 100%;
    }
    .overlay.open li {
      -webkit-animation: fadeInRight 0.5s ease forwards;
              animation: fadeInRight 0.5s ease forwards;
      -webkit-animation-delay: 0.35s;
              animation-delay: 0.35s;
    }
    .overlay.open li:nth-of-type(2) {
      -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
    }
    .overlay.open li:nth-of-type(3) {
      -webkit-animation-delay: 0.45s;
              animation-delay: 0.45s;
    }
    .overlay.open li:nth-of-type(4) {
      -webkit-animation-delay: 0.5s;
              animation-delay: 0.5s;
    }
    .overlay nav {
      position: relative;
      height: 70%;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      font-size: 40px;
      font-family: "Noway-round";
      font-weight: 400;
      text-align: center;
    }
    .overlay ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      display: inline-block;
      position: relative;
      height: 100%;
    }
    .overlay ul li {
      display: block;
      height: 20%;
      height: calc(100% / 5);
      min-height: 40px;
      position: relative;
      opacity: 0;
    }
    .overlay ul li a {
      display: block;
      position: relative;
      color: #fff;
      text-decoration: none;
      overflow: hidden;
    }
    .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
      width: 100%;
    }
    .overlay ul li a:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      height: 3px;
      background: #fff;
      -webkit-transition: 0.35s;
      transition: 0.35s;
    }
    
    @-webkit-keyframes fadeInRight {
      0% {
        opacity: 0;
        left: 20%;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
    
    @keyframes fadeInRight {
      0% {
        opacity: 0;
        left: 20%;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="overlay" id="overlay">
      <nav class="overlay-menu">
        <ul>
          <li><a href="_index.html">Home</a></li>
          <li><a href="_index.html#prof">Profile</a></li>
          <li><a href="_index.html#lesson">Lesson</a></li>
          <li><a href="_index.html#info">Information</a></li>
          <li><a href="_index.html#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
[/code]


CC BY-SA 3.0
2018-01-09T08:24:21.650
40835
2018-01-09T14:55:03.880
2018-01-09T14:55:03.880
3068
26929
question
javascript jquery
ハンバーガーメニューをページ内リンクの時に閉じるには


> $('#toggle').click(function()

で、付けたり外したしているclass（'active'と'open'）をメニューのリンクがクリックされたら、  
削除（removeClass）すれば良いです。


CC BY-SA 3.0
2018-01-09T10:23:47.970
40840
2018-01-09T10:23:47.970
22793
40835
answer