## 実現したいこと
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コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/23 04:29