jqueryでボタンを押しても閉じなくなりました。

jqueryでボタンをクリックするとメニューが開き、
かつ領域外をクリックすると閉じる設定にしたのですが、
自身のボタンをクリックしてもメニューが閉じなくなってしまいました。
どうすればボタンクリックで閉じるようになるのでしょうか。
以下、コードです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script>

$(function() {
$('.open').hide();
$('.btn').each(function() {
$(this).click(function() {
$('.open').hide();
$(this).next('.open').slideToggle("fast");
});
});
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.btn').length) {
$('.open').fadeOut();
}
});

</script>

以下はhtmlです。

<div class="btn"><p>ボタン</p></div>

<table class="open">
<tr><td>コンテンツ</td><td>コンテンツ</td></tr>
<tr><td>コンテンツ</td><td>コンテンツ</td></tr>

</table>


javascript、jqueryともに初心者レベルです。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/08/21 09:35

こんにちは

細かなところをどうしたいのかよくわかりませんが・・・
（消すのがhideだったりfadeOutだったり、表示はslideだったりなので）

一応似せたつもりですが、こんな感じではどうでしょうか？
$(function(){
$('.open').hide();

$(document).on('click', function(e){
var b = $(e.target).closest('.btn');

if(!b.length || b.next('.open:visible').length){
$('.open').fadeOut();
} else {
$('.open').hide();
b.next('.open').slideDown('fast');
}
});
});

この回答へのお礼

ありがとうございます。
助かりました。

お礼日時：2017/08/22 09:31

No.2 回答者： yambejp 回答日時： 2017/08/21 11:21

とりあえずこんな感じ？

$(function() {
$('.open').hide();
$('.btn').on('click',function() {
$(this).next('.open').fadeToggle();
});
$(document).on('click','*', function(e) {
e.stopPropagation();
if($(this).closest('.open,.btn').length==0){
console.log($(this).get(0));
$('.open').fadeOut();
}
});
});

この回答へのお礼

ありがとうございます。
今回ははじめに回答してくださった方をベストアンサーにいたしました。

お礼日時：2017/08/22 09:33