jQueryでメニュー等の領域外をクリックした時に閉じるようにする

思ったこと

jQueryを使ってメニュー等の表示、非表示を切り替えるときにtoggleClass()とCSSを使ってメニューを隠したり隠さなかったりするというやり方はシンプルだけど、メニューの外をクリックした時もメニューが消えずにうっとおしかった。

ググった結果

何やらややこしいやり方しか書いてなかった。

やったこと

領域外クリックの検知
jQuery側
$(document).click(function() {　$('#menu').hide();　});

これだけ。

問題点

このままでは表示した要素内をクリックするとその要素自体も消えてしまう。もともと非表示のメニュー等、消えても問題のない場合もあるが、殆どの場合は要素内をクリックして消えられては困る。

解決策

$('#menu').click(function() {　event.stopPropagation();　});
の一行を追加。

これで親要素にイベントが伝わらなくなるので要素内をクリックしても消えなくなる。

結論

これが最適なのかはわからないけどとりあえず動いた〜！と言った感じ。
"そんなもん当たり前や！"とか"文章がわかりづらい"とか思われたらすみません。
独学で勉強を始めたばかりなので間違っていることとかもっと効率のいい方法とかいったようなことがあればご教示ください。