【jQuery】領域外をクリックでメニューを閉じる

質問

質問させて頂きます。
現在、webサイトを制作しておりまして、
メニューボタンを押すとメニューが開閉されるものを作ろうとしております。

色々調べて試行錯誤しているのですが、なかなかうまくいきません。

下に記述のものは、現在の状態です。
メニューの開閉はできるのですが、閉じるためには再度メニューボタンを押さなければなりません。（メニューの中のリンクを押しても表示されたままです）
これをどこかしらクリックで閉じる様にしたいのですが、
どうすればいいでしょうか。

ちなみにメニューボタンで動作を行うのはスマホ用で、
PC版は通常のスティッキーヘッダーメニューのレスポンシブでの切り替えです。

[ html ]
<header id="top-head">
<div class="inner">
<span class="menu-toggle">メニュー</span>
<nav id="global-nav">
<ul>
<li><a href="#1へのリンク">メニュー1</a></li>
<li><a href="#2へのリンク">メニュー2</a></li>
<li><a href="#3へのリンク">メニュー3</a></li>
<li><a href="#4へのリンク">メニュー4</a></li>
<li><a href="#5へのリンク">メニュー5</a></li>
<li><a href="#6へのリンク">メニュー6</a></li>
</ul>
</nav>
</div>
</header>

[ script ]
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#global-nav").show();
} else {
$("#global-nav").hide();
}
});

こちらに手をくわえるのでもよいですし、
別のいいやり方があるのであればそちらでも構いません。

ご教示の程、よろしくお願い致します。