🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2545閲覧

windowサイズに合わせてslideToggleを自動で閉じたい

kaaaarin

総合スコア17

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/11/10 09:12

## 実現したいこと
whindowサイズに合わせてアコーディオンメニューを閉じたい。

## 問題になっていること
windowサイズ767px以下でアコーディオンメニューを表示しています。
ボタンを押せば、アコーディオンメニューは閉じるようになっています。
ボタンを押さずにwindow幅を767px以上にすると、アコーディオンメニューが不自然に残ってしまいます。

## 解決したいこと
windowサイズによってアコーディオンメニューが自動で閉じるようにしたいです。
どのようなjqueryを書けばよろしいでしょうか?

jquery

1window.addEventListener('DOMContentLoaded', function(){ 2 $("button").click(function(){ 3 $("nav ul").slideToggle(200); 4}); 5});

html

1<div class="container-wrapper"> 2 <header> 3 <div class="header-logo"> 4 <img src="/img/logo.png" alt=""> 5 </div> 6 <button><img src="/img/button.png" alt="" class="icon-img"></button> 7 <nav> 8 <ul> 9 <li><a href="#"><span class="first-child">card</span></a></li> 10 <li><a href="#">news</a></li> 11 <li><a href="#">price</a></li> 12 <li><a href="#">access</a></li> 13 <li><a href="#">contact</a></li> 14 </ul> 15 </nav> 16 </header> 17</div>

sass

1.container-wrapper { 2 width: 100%; 3 z-index: 1; 4 5header { 6width:100%; 7max-width: 1366px; 8height: 100px; 9background: #3F51B5; 10overflow:hidden; 11opacity: 1; 12 13@include mq('sp') { 14height: 80px; 15} 16} 17 18.header-logo { 19position: relative; 20top: 31px; 21bottom: 30px; 22margin-left: 140px; 23margin-right: 0; 24width: 200px; 25height: 39px; 26opacity: 1; 27 28@include mq('tab') { 29 width: 150px; 30 31} 32@include mq('sp') { 33 top: 21px 34} 35 36} 37button { 38position: relative; 39background-color: #3F51B5; 40border: 1px solid #3F51B5; 41height: 100%; 42top: -25px; 43float: right; 44display: none; 45@include mq('sp') { 46display: inline-block; 47 } 48 } 49 50.icon-img{ 51 52 width: 30px; 53 top: 0px; 54 position: relative; 55 float: right; 56 margin-right: 20px; 57 z-index: 1; 58 top: -10px; 59 60 @include mq('sp') { 61 display: inline-block; 62 } 63} 64 65 66 67 68 69nav { 70position: relative; 71width: 344px; 72height: 26px; 73opacity: 1; 74float: right; 75margin-right: 140px; 76z-index: 1; 77 78@include mq('tab') { 79 margin:0 10px; 80} 81 82@include mq('sp') { 83 bottom: 10px; 84} 85 86} 87ul { 88letter-spacing: 0; 89opacity: 1; 90display: flex; 91list-style: none; 92margin: 0; 93padding: 0; 94font-weight: normal; 95font-size: 16px; 96z-index: 2; 97 98} 99 100nav ul { 101 @include mq('sp') { 102 display: none; 103 position: absolute; 104 z-index: 2; 105 background-color: #3F51B5; 106 right: -72px; 107 top: 50px; 108 109 } 110} 111 112 113li a{ 114 margin-right: 24px; 115 text-transform: capitalize; 116 color: #FFFFFF; 117 text-decoration: none; 118 background:#3F51B5; 119 z-index: 1; 120 121 122 @include mq('tab') { 123 margin-right: 12px 124 } 125} 126.first-child{ 127 text-decoration: underline red; 128 margin-top: 0.5px; 129} 130 131 132} 133コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ウィンドウのリサイズごとにウィンドウサイズを確認して、
768px以上の時にslideUpさせるのが簡単かなと思います。

JavaScript

1$(window).on('resize', function () { 2 if (window.matchMedia('(min-width:768px)').matches) { 3 $("nav ul").slideUp(200); 4 } 5});

投稿2019/11/11 03:15

AsukaKobayashi

総合スコア296

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaaaarin

2019/11/23 04:29

せっかく回答していただいたにも関わらず、返信が遅くなってしまい、申し訳ございません。 回答していただいた方法で、うまくいきました。本当にありがとうざいました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問