Jquery の slide.toggle でメニューを作っていますが、
ボタンでは正常にメニューの開閉がされるのですが、
ボタン以外のクリック(またはタップ)で
開いたメニューを閉じたいのですがうまくいきません。
コードは以下のように記述しています。
$('#menu').each(function(){
$(this).css("height",$(this).height()+"px");
});
$('#btn').click(function () {
$('#menu').slideToggle('slow');
$(this).toggleClass('active');
});
お詳しい方、ご教授お願いいたします。
No.4
- 回答日時:
ああ、ごめんなさい、ボタン以外のクリックで閉じるんでしたね
$(function(){
$(document).on('click',function () {
$('#menu').slideUp('slow');
});
$('#btn').on('click',function (e) {
$('#menu').slideToggle('slow');
e.stopPropagation();
});
});
No.3ベストアンサー
- 回答日時:
普通にボタンでメニューだしたり消したりならこれでいいのでは?
<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('#btn').on('click',function () {
$('#menu').slideToggle('slow');
});
});
</script>
<button type="button" id="btn">menu toggle</button>
<nav id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript javascriptで文字挿入でtoggleみたいなのはありますか? 2 2023/02/14 21:53
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報
ご回答ありがとうございます。
詳しいことはわからずに、
他のサイトにあったコードをそのまま使いました。
<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>
ご回答ありがとうございます。
教えていただいたコードに変更して試してみましたが、
状況は変わらずボタンでしか操作できないようです。
ただ、コードは非常に簡素化されてスッキリしました。
ありがとうございます。
こちらのコードで試してみたところ、
パソコンでは思い通りの動作になりました。
ただ、タブレットやスマホでタップしても反応しません。
これをタップでも可能にするにはどうすればいいでしょうか?