領域外をクリックすることで開閉メニューを閉じる方法

質問

お世話になっております。

メニュー３をクリックするとサブメニューが出たり閉じたりするタイプの開閉メニューを作ったのですが、
開くときはメニュー３のクリックで開閉メニューが表示され、
閉じる時は
#backnumbers　以外の領域をクリックすることで閉じるようにしたいと言われて
今試行錯誤しております。

例えば↓のような感じのコードなどを追加してみたりして
やってみてるのですが、

$(this).click(function(){
$("#backnumbers").hide();
return false;
});

消えるのは消えるんですが、backnumbers内の領域をクリックしても消えてしまい、
aタグの設定が消えてしまうので、これを上手く処理する方法はないでしょうか？

下記のコードで今組んでいっています。

js

<script type="text/javascript">
$(function(){
$("#header-bn > a").click(function(){
$("#backnumbers").slideToggle();
return false;
});
});
</script>

HTML

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li id="header-bn"><a href="september.html">メニュー3</a>
<ul id="backnumbers">
<li><a href="8.html">8</a></li>
<li><a href="7.html">7</a></li>
</ul>
</li>
</ul>

回答No.1

ONEONE · ベストアンサー

こんな感じかな

//画面内クリック
$(document).click(function(){
$("#backnumbers").slideUp();
});
//backnumbers内クリック
$("#backnumbers").click(function(e){
//イベントバブリングの停止
e.stopPropagation();
});

http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=226e7

お礼

お世話になります。

すみません。お礼を入れてたつもりが入っておりませんでした。
無事ご教示いただきました方法にて、実現できました。

本当にありがとうございます。