1ページ完結型のシングルページやランディングページで、コンテンツが長いと、アコーディオンメニューやドロワーメニュー（横から出てくるやつ）を設置して、ページ内リンクを貼るかと思います。
PCの場合は、特に問題はないですけど、スマホの場合はメニューを開いたままでページ内リンクで飛んでも、メニューは開いたままになってしまいます。

↓要はこんな感じ
DEMO

これを回避するには、ページ内リンクのリンクを押した後の処理を追加で記述する必要があります。
アコーディオンメニューの設置から、ページ内リンクの調整部分までを順番に解説していきます。

やってる事はこの流れ

• ページ内リンクのスムーズスクロールを設置
• アコーディオンメニューをtoggleメソッドで配置
• ナビゲーションのリンクをクリック（タップ）してもメニューが閉じるようにする

【1】ページ内リンクの設置（動きはアニメーション）

メニューと各ページ内リンク先の「section」を用意。

  <nav class="menu-box">
    <p class="menu-btn"></p>
      <ul>
        <li><a href="#content01">メニュー01</a></li>
        <li><a href="#content02">メニュー02</a></li>
        <li><a href="#content03">メニュー03</a></li>
        <li><a href="#content04">メニュー04</a></li>
      </ul>
  </nav>

  <section>
    <h2 id="content01">見出しその1</h2>
      <p>コンテンツ内容が入ります。</p>
  </section>
  <section>
    <h2 id="content02">見出しその2</h2>
      <p>コンテンツ内容が入ります。</p>
  </section>
  <section>
    <h2 id="content03">見出しその3</h2>
      <p>コンテンツ内容が入ります。</p>
  </section>
  <section>
    <h2 id="content04">見出しその4</h2>
      <p>コンテンツ内容が入ります。</p>
  </section>

この辺は、実際のサイトのデザインで適正調整してください。

続いて、ページ内リンクをパッと移動するんじゃなくて、シュイーンとスムーズスクロールするための記述を追加。

  $('a[href^="#"]').click(function() {
      var speed = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });

【2】アコーディオンメニューを設置

アコーディオンはjQueryのToggleメソッドを使います。

    $(".menu-box .menu-btn").on("click", function() {
        $(this).next().slideToggle();
        $(this).toggleClass("active");
    });

「.menu-btn」をクリックした時にその次の要素が.slideToggle（開く）ようにして、「.menu-btn」に「active」ってclassを追加するようにしています。

.menu-box ul {
  display: none;
}

アコーディオンで開かせたい要素は、あらかじめ「display: none;」で非表示にしておきます。

【3】ページ内リンクをクリックした時の動きも追加

    $(".menu-box ul li a").on("click", function() {
        $(".menu-box ul").slideToggle();
        $(".menu-box .menu-btn").removeClass("active");
    });

指定箇所のaタグをクリックすると、開いているナビゲーションが閉じて、ボタンについてる「active」のclassを消すようにする。（ナビゲーションのデザインを開いている時と開いてないときで変えたい場合）

↓全部まとめると、こんな感じになります。
DEMO

その他注意点

ナビゲーションを「position: fixed;」とかで丈夫に固定している場合は、ページ内リンク先の見出しやsection部分にはこんな感じの記述をしないと、見出しがナビゲーションで隠れちゃうので、注意。

section h2 {
  margin-top: -80px;
  padding-top: 80px;
}

アコーディオンメニューの開いている時と開いてないときは、CSSで調整可能です。（今回はアイコンを擬似要素で変更）

.menu-btn:before {
  content: '\f0c9';
}
.menu-btn.active:before {
  content: '\f00d';
}