(jQuery)ハンバーガーメニューとナビ表示の挙動について

前提・実現したいこと

こんにちわ！
現在ポートフォリオに載せるためのサイト(架空・シングルページ・マルチデバイス対応)
を制作しております。

只今スマホとタブレットの際表示されるハンバーガーメニュー実装中で、
自身なりに色々検証、情報収集しある程度形には出来たのですが、
ハンバーガーメニュー以外の部分をクリック(タップ)した際メニューとナビを閉じる記述を導入後、
その動作の目的自体は達成できたのですが、
今度はハンバーガーメニュー自体を押した際メニュー表示の切り替えが行われずスマホのナビも閉じなくなりました。

●実現したいこと

・ハンバーガーメニュー開表示時(x)にそれ以外の部分をクリック(タップ)した場合,
メニュー閉表示時(三)→メニュー初期状態に戻した上でスマホのナビ部分も閉じたい。
↓
現在達成済み

・ハンバーガーメニュー開表示時(x)にそれ自体をクリック(タップ)した場合も、
メニュー閉表示時(三)→メニュー初期状態にした状態でスマホのナビ部分も閉じたい。
↓
現在解決していない問題

jQueryは学校で触れた程度で初心者です。
どなたかご教授頂けると幸いです。

下記にサイトのアドレスを記載させていただいたので、
もしgoogleの検証等で確認していただける方がいらっしゃればご意見いただけると幸いです。
もし確認していただける方がいらっしゃればお手数ですがベーシック認証を行っているので下記のidとpasswordも入力していただけるとアクセス可能です。

・サイトアドレス
http://artoss.html.xdomain.jp/

・ベーシック認証
id...portfolioak
password...artosssite

該当のソースコード

jQuery
1//ハンバーガーメニュー設定
2	//サイト表示時spナビ非表示
3	//$("header .sp_nav.close").hide();
4	//「#sp_menu a」をクリックした時
5    $("#sp_menu a").click(function(){	
6			//「#sp_menu a」にactiveクラスを付けたり取ったりする
7            //0.3秒でナビの開閉
8            $("header .sp_nav").slideToggle(300);
9            //ハンバーガーメニューのonoff
10			$(this).toggleClass("active");
11			//「header nav.sp_nav」にmenu_clickを付けたり取ったりする
12            $("header .sp_nav").removeClass("close");
13			$("header .sp_nav").toggleClass("open");			
14            //aタグの機能を停止
15            return false;
16        });
17
18    //sp及びタブレットメニュー開示時、
19	//メニュー以外の部分をクリックやタップした場合、メニューを閉じる指定。
20	$(document).on('click touchstart', function(event) {
21    if (!$.contains($(".sp_nav")[0], event.target)) {
22    	//#sp_menu aから.activeを取り除く。
23    	$("#sp_menu a").removeClass("active");
24    	//.sp_navもフェードアウトしながら消滅。
25        $(".sp_nav").fadeOut();
26			}
27		});