ハンバーガーメニューが閉じないです。

ハンバーガーメニューを作っています。
勉強中でハンバーガーメニューでつまずいているのでご教授いただきたいです。
ボタンはactiveで動くようになっています。

実現したいこと

・ハンバーガーメニューが開いた状態のまま動かないのでそこから閉じる動きをしたい。

発生している問題・エラーメッセージ

メニューが出ている状態でcloseボタンを押してもメニューがsliddeUpで隠せない。

該当のソースコード

HTML
1<div class="header-list">
2      <div class="openbtn"><span></span><span></span></div>
3      <nav>
4		  <div class="closebtn"></div>
5        <ul class="header-list-ul">
6          <li>
7            <p> <span class="slide-in rightAnime"> <span class="slide-in_inner rightAnimeInner">PRODUCTS</span> </span> </p>
8          </li>
9          <li>
10            <p> <span class="slide-in rightAnime"> <span class="slide-in_inner rightAnimeInner">ABOUT</span> </span> </p>
11          </li>
12          <li>
13            <p> <span class="slide-in rightAnime"> <span class="slide-in_inner rightAnimeInner">COMPANY</span> </span> </p>
14          </li>
15          <li>
16            <p> <span class="slide-in rightAnime"> <span class="slide-in_inner rightAnimeInner">CONTACT</span> </span> </p>
17          </li>
18        </ul>
19      </nav>
20		
21    </div>

css
1
2.openbtn{
3	/*ボタン内側の基点となるためrelativeを指定。
4追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
5	position: relative;
6	width: 50px;
7    height:50px;
8	cursor: pointer;
9	z-index: 1200;
10}
11	
12/*ボタン内側*/
13
14.openbtn span{
15    display: inline-block;
16    transition: all .4s;/*アニメーションの設定*/
17    position: absolute;
18    left: 13px;
19    height: 2px;
20	background-color: #333;
21  }
22
23
24.openbtn span:nth-of-type(1) {
25	top:22px;	
26  	width: 50%;
27}
28
29.openbtn span:nth-of-type(2) {
30	top:29px;
31  	width:30%;
32}
33
34/*activeクラスが付与されると線が回転して×に*/
35
36.openbtn.active span:nth-of-type(1) {
37	background-color: #fff;
38    top: 20px;
39    left: 16px;
40    transform: translateY(6px) rotate(-45deg);
41    width: 35%;
42}
43
44.openbtn.active span:nth-of-type(2) {
45	background-color: #fff;
46    top: 32px;
47    left: 16px;
48    transform: translateY(-6px) rotate(45deg);
49    width: 35%;
50	color: #fff;
51}
52.header-list nav {
53	display: none;
54	text-align: left;
55	height: 100%;
56	width: 100%;
57	background-color: rgba(0,0,0,0.80);
58	position: fixed;
59	top: 0;
60	left: 0;
61	z-index: 1000;
62}
63  .header-list ul {
64    display: block;
65    padding: 50px 0 0 50px;
66  }
67  .header-list ul li {
68    color: #fff;
69	padding: 10px 0;
70	  font-size: 1.4rem;
71  }

js
1$(".openbtn").click(function () {
2    $(this).toggleClass('active');
3});
4$('.closebtn').on("click", function () {
5	$('.header-list nav').slideUp();
6});
7$('.openbtn').on("click", function () {
8	$('.header-list nav').slideDown();
9});

試したこと

jsの.closebtnを.openbtnに変えたらslideUpの動きは反応したもののclosebtnに変えても動きがないのでどこにclosebtnを当てればいいかわからなくなってしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

せっかくメニューが開いているかどうかをactiveクラスで判別できるようにしているのですから、
同じボタンを使ってactiveクラスのあるなしで動作を変えるといいと思います。

javascript
1$('.openbtn').on("click", function () {
2    if ($(this).hasClass('active')) {
3        $('.header-list nav').slideUp();
4    } else {
5        $('.header-list nav').slideDown();
6    }
7    $(this).toggleClass('active');
8});