クリックイベントで2回処理されてしまう ハンバーガーメニュー

Question

前提・実現したいこと

jQueryでスマホ向けのレスポンシブでアイコンをクリックするとメニューが表示され、アイコンが×に書き換わり、
もう一度クリックするとメニューが非表示になり、アイコンが元に戻る
ハンバーガーメニューを作成しています。

初回のクリックでメニューが正しく表示され、アイコンも変更されるところまでは確認できていますが、
2回目のメニューを閉じるクリックで
slideUpした瞬間、再度slideDownしてしまい、非表示になりません。

アイコンはFont Awesomeのものを使用しています。

1回のクリックで１つの処理しか行えないようにできたらいいのですが、解決に至りませんでした。
皆様の知恵を貸していただければと思い、質問させていただきました。
JavaScript（jQuery）を学習してから初めてページをつくっているという状況なので、拙い文章ですがお許しください。
また、不明瞭な点などがございましたら追記いたしますので、よろしくお願いいたします。

特にエラーメッセージは表示されていませんが、以下の文が表示されましたのでご参照ください。

A cookie associated with a cross-site resource at http://bit.ly/ was set without the `SameSite` 
attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are 
set with `SameSite=None` and `Secure`. You can review cookies in developer tools under 
Application>Storage>Cookies and see more details 

該当のソースコード

　<header>
　　<div class="container">
　　　⋮
　　　<div class="header-right">
　　　　⋮
　　　　<div id="menu-icon">
　　　　　<i class="fa fa-bars"></i>
　　　　</div>
　　　</div>
　　</div>
　</header>
　<div id="menu-wrapper">
　　<a href="#ability-btn">ability</a>
　　<a href="#message-btn">message</a>
　　<a href="#sns-btn">SNS</a>
　</div>

#menu-icon {
	display: none;
}

#menu-wrapper {
	display: none;
	float: right;
	width: 120px;
	height: 175px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 10;
	position: fixed;
	top: 50px;
	right: 0;
	flex-direction: column;
	border-radius: 0 0 0 10px;
}

#menu-wrapper a {
	font-size: 28px;
	color: #5d5d63;
	font-family: 'EB Garamond', serif;
	text-decoration: none;
	padding-left: 20px;
	padding: 10px 0 10px 20px;
}

@media screen and (max-width: 670px) {
　#menu-icon {
　　float: right;
　　display: block;
　　padding: 0 20px;
　　line-height: 50px;
　}

　#menu-icon:hover {
　　cursor: pointer;
　　background-color: #a3a668;
　}
}

  $('#menu-icon').click(function(){
      if($('#menu-wrapper').css('display','none')) {
        $('#menu-wrapper').slideDown(200).css('display', 'flex');
        $('#menu-icon').html('<i class="fa fa-times"></i>');
      }else if($('#menu-wrapper').css('display','flex')){
        $('#menu-wrapper').slideUp(200).css('display', 'none');
        $('#menu-icon').html('<i class="fa fa-bars"></i>');
      }else{;}
    });

試したこと

click()をone()に変えてみたりしましたが、2回目の閉じるためのクリックができないので解決しませんでした。

補足情報（FW/ツールのバージョンなど）

使用エディタ：Atom
環境：Windows10、chrome

Comments

[kei344]

https://jsfiddle.net/qx17to6s/ 提示されたコードではそもそもメニューが表示されません。また、デベロッパーツールで表示させても「2回目のメニューを閉じるクリック」が押せる状況にはなりません。提示するコードを間違っていませんか？

[.ryou]

メディアクエリで画面の幅が670px以下にならないとメニューアイコンが表示されないようになっているのでそのためかと思います。
それ以上の場合は横に文字で表示されるようにしましたが、その部分は省略いたしました。
必要であれば追記いたします。
よろしくお願いいたします。

Answer 1

質問者様のコードを拝見して、疑問に思った事は、

1. CSSの　#menu-icon {display: none;}　では、メニューアイコンが表示されないのではないかと思うのですがどうですか？　
2. jsの$('#menu-icon').clickのfunction内のif文の条件式にある$('#menu-wrapper').css('display','none')は値の設定をしてませんか？

これをすると、cssがどんな状態でも、常に$('#menuーwrapper')のcssの'display'を'none')にしてしまうと思います。
例えば、

if(2+2){
  console.log("a");
}

を実行すると、aが表示されます。つまり、条件式に計算式が入っている場合は、その計算式が計算されて、条件式の評価は、TRUEを返すので、その以下の処理を行います。
質問者様のやりたい事をコードにするなら

$('#menu-icon').click(function(){
      if($('#menu-wrapper').css('display')=='none') {
        $('#menu-wrapper').slideDown(200).css('display', 'flex');
        $('#menu-icon').html('<i class="fa fa-times"></i>');
      }else if($('#menu-wrapper').css('display')=='flex'){
        $('#menu-wrapper').slideUp(200).css('display', 'none');
        $('#menu-icon').html('<i class="fa fa-bars"></i>');
      }else{;}
    });``
かなと思います。

Comments

[.ryou]

ご回答ありがとうございます！
1.について
メディアクエリで画面の幅が670px以下にならないとメニューアイコンが表示されないようになっているのでそのためかと思います。
それ以上の場合は横に文字で表示されるようにしましたが、その部分は省略いたしました。
必要であれば追記いたします。

2.について
if文の条件文の書き方が間違っていたのですね。
きっとそのせいで挙動がおかしかったのだと思います。
.css('display','none')を.css('display') == 'none')に変更します。(else if の条件文も同様にします)

只今外出中なので、帰宅次第コードを修正し、結果をお伝えします。
ありがとうございます。

よろしくお願いいたします。

[.ryou]

条件文を修正したら無事メニューが非表示になるようになりました！
説明も項目立ててあり、大変わかりやすかったです。
本当にありがとうございました！
ベストアンサーです！！

[bonji]

それなら、よかったです。
自分も、.ryouさんのお陰で、改めて色々学びました。
こちらこそ、ありがとうございました。

Answer 2

書き部分のインデントがすべて全角空白なので半角にしましょう。

@media screen and (max-width: 670px) {
　#menu-icon {
　　float: right;
　　display: block;
　　padding: 0 20px;
　　line-height: 50px;
　}

　#menu-icon:hover {
　　cursor: pointer;
　　background-color: #a3a668;
　}
}

Comments

[.ryou]

ご回答ありがとうございます。
普段tabを使って揃えているのですが、コピペした際空白が多すぎたので一度直しました。
その為全角になっているのだと思います。
紛らわしい表記で申し訳ございませんでした。
よろしくお願いいたします。