Jquery の slide.toggle で要素外（ボタン以外）で閉じるには？

解決済

質問者：k-kazun
質問日時：2017/07/15 10:56
回答数：4件

Jquery の slide.toggle でメニューを作っていますが、
ボタンでは正常にメニューの開閉がされるのですが、
ボタン以外のクリック（またはタップ）で
開いたメニューを閉じたいのですがうまくいきません。
コードは以下のように記述しています。

$('#menu').each(function(){
$(this).css("height",$(this).height()+"px");
});
$('#btn').click(function () {
$('#menu').slideToggle('slow');
$(this).toggleClass('active');
});

お詳しい方、ご教授お願いいたします。

ご回答ありがとうございます。
詳しいことはわからずに、
他のサイトにあったコードをそのまま使いました。

No.1の回答に寄せられた補足コメントです。補足日時：2017/07/16 16:41
通報する
<body>～</body>の間は以下のとおりです。

<header>
<button type="button" id="btn"></button>
<nav id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
</headr>

<script>Jquery</script>
<script>
$('#menu').each(function(){
$(this).css("height",$(this).height()+"px");
});
$('#btn').click(function () {
$('#menu').slideToggle('slow');
$(this).toggleClass('active');
});
</script>

補足日時：2017/07/16 17:50
通報する
ご回答ありがとうございます。
教えていただいたコードに変更して試してみましたが、
状況は変わらずボタンでしか操作できないようです。
ただ、コードは非常に簡素化されてスッキリしました。

No.3の回答に寄せられた補足コメントです。補足日時：2017/07/16 18:26
通報する
ありがとうございます。
こちらのコードで試してみたところ、
パソコンでは思い通りの動作になりました。

ただ、タブレットやスマホでタップしても反応しません。
これをタップでも可能にするにはどうすればいいでしょうか？

No.4の回答に寄せられた補足コメントです。補足日時：2017/07/16 18:48
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2017/07/16 18:09

普通にボタンでメニューだしたり消したりならこれでいいのでは？

- 0
- 件

通報する

No.4

回答者： yambejp
回答日時：2017/07/16 18:30

ああ、ごめんなさい、ボタン以外のクリックで閉じるんでしたね

$(function(){
$(document).on('click',function () {
$('#menu').slideUp('slow');
});
$('#btn').on('click',function (e) {
$('#menu').slideToggle('slow');
e.stopPropagation();
});
});