ハンバーガーバーをクリックしたら閉じたい

ハンバーガーバーメニューをクリックしたら閉じるようにしようとしています。
現在以下のしていますが、閉じず、クリックしてもスクロールして動いています。
「a class="scroll"」がいけないのか、解決法等教えて頂きたくどうぞよろしくお願い致します。

/*HTML*/
<div class="container">
<button class="btn-nav">
<div class="label">MENU</div>
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>

<nav class="nav-container hidden hideNav">
<ul class="nav-list">
<li class="list-item"><a class="scroll" href="#home">ホーム</a></li>
<li class="list-item"><a class="scroll" href="#principles">AAA</a></li>
<li class="list-item"><a class="scroll" href="#about">BBB</i></a></li>
<li class="list-item"><a class="scroll" href="#gallery">CCC</a></li>
</ul>
</nav>

</div>
<script>
$(document).ready(function () {
$(".nav-list li a").click(function(event) {
$(".nav-container").hide();
});
});
</script>

質問者からの補足コメント

• すみません。自己レスです。見当違いなことを書き込んでいました。
  ソースの中にすでに以下ありました。
  これを改造していけばいいのかと思いました。
  引き続きみていきます。
  
  $(window).load(function() {
  $(".btn-nav").on("click tap", function() {
  $(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
  $(this).toggleClass("animated");
  });

    補足日時：2018/03/07 15:20

• 

  自己レスです。先ほどの補足コードに以下を追加したら、リンク先をクリックしたら閉じて、ハンバーガーバーをクリックしたら開くようになりました。ありがとうございました。
  
  $(".nav-list li a").on("click tap", function() {
  $(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
  $(this).toggleClass("animated");
  });

    補足日時：2018/03/07 15:26

No.1 ベストアンサー 回答者： nishi16 回答日時： 2018/03/05 19:31

script の中，$(".nav-list li a") ではなくて，$(".btn-nav") とかにしないと，

アイテムをクリックしたときに閉じるようになっていますよ。

そもそも何をクリックしても閉じないのであれば，jQuery を読み込んでいないのでは？
$(...) を使っているってことは jQuery を想定していますよね。

この回答へのお礼

早速ありがとうございます。
ご指摘のとおり、jQueryの読み込み前にスクリプトを書いていたのでjQueryの後に移動させました。

$(".btn-nav") にするとアコーディオンをクリックした際、開かずそのまま閉じたままでした。
$(".nav-list li a")にすると選択した後ページ移動し、アコーディオンも閉じたのですが、その後、再度アコーディオンをクリックすると開かず閉じたままとなりました。(アイテムをクリックした後閉じるようにしたいと思っています)

何かその他確認する箇所などございましたらどうぞよろしくお願い致します。

お礼日時：2018/03/06 10:26

No.2 回答者： nishi16 回答日時： 2018/03/06 14:20

script に開く処理を記述しないと開かないですよ。

hide で隠す処理しかしていないですよね。

最終的に実装したいものがどういうものか分かっていないのですが，
「アイテムをクリックすると閉じる，MENUをクリックすると開く」という処理にするなら，
最も単純なもので，
　<script>
　$(document).ready(function () {
　　　$(".nav-list li a").click(function(event) {
　　　　　$(".nav-container").hide();
　　　});
　　　$(".btn-nav").click(function(event) {
　　　　　$(".nav-container").show();
　　　});
　});
　</script>
みたいな感じではないですか？

急に現れるようになっていますが，jQueryを使っているならslideToggleを使うと
スライドして開くので，少し見た目がよくなると思います。

この回答へのお礼

早速ありがとうございます。元々あるテンプレートを変更しながら使用しています。
そもそもの作りがslideToggleというものであったのかもと見てみたところ@keyframesというのでCSSで開閉しているように思いました。@keyframes の使い方がよく分からず、調べているところです。
何かいいアイディアがございましたらどうぞよろしくお願い致します。

＞「アイテムをクリックすると閉じる，MENUをクリックすると開く」という処理にするなら，
まさにそのようにしたいと思っています。

----
@keyframes
showNav { from {
left: -100%;
}
to { left: 0; }
}
@-webkit-keyframes
showNav { from {
left: -100%;
}
to { left: 0; }
}
@-moz-keyframes
showNav { from {
left: -100%;
}
to { left: 0; }
}
@-o-keyframes
showNav { from {
left: -100%;
}
to { left: 0; }
}
.showNav {
-webkit-animation: showNav .5s ease forwards;
-moz-animation: showNav 1s ease forwards;
-o-animation: showNav 1s ease forwards;
animation: showNav .5s ease forwards;
position:fixed;
z-index:998;
}
.hideNav {
-webkit-animation: hideNav 1s ease forwards;
-moz-animation: hideNav 1s ease forwards;
-o-animation: hideNav 1s ease forwards;
animation: hideNav 1s ease forwards;
position:fixed;
}
.hidden {
display: none;
}

お礼日時：2018/03/07 11:38