質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2656閲覧

jqueryでレスポンシブ対応のアコーディオンメニューを作成したいです。

yucco

総合スコア11

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/12 10:03

jqueryでレスポンシブ対応のメニューを作成したいと思っております。
大カテゴリーをハンバーガーメニューで左から出し、その中の小カテゴリーをアコーディオンで表示させたいです。
左からメニューを出すことは出来たのですが、アコーディオンメニューを設置すると全てのカテゴリーが同時に開いてしまいます。
「.next」を追加してみたのですが、追加をするとアコーディオンが反応しなくなります。
解決策の知恵をお貸しくださいませ。

html

1 <div id="wrap"> 2 <header> 3 <div class="inner clearfix"> 4 <p class="navBtn"> 5 <span></span> 6 <span></span> 7 <span></span> 8 </p> 9 <nav role='navigation'> 10 <ul class="clearfix"> 11 <li class="list">カテゴリーメニュー</li> 12 <li><a href="">テスト</a></li> 13 <li class="toggle"><a href="" class="dropdown-toggle" data-toggle="dropdown">テスト</a> 14 <ul class="menu"> 15 <li><a href="">テスト</a></li> 16 <li><a href="">テスト</a></li> 17 <li><a href="">テスト</a></li> 18 </ul> 19 </li> 20 <li class="toggle"><a href="" class="dropdown-toggle" data-toggle="dropdown">テスト</a> 21 <ul class="menu"> 22 <li><a href="">テスト</a></li> 23 <li><a href="">テスト</a></li> 24 <li><a href="">テスト</a></li> 25 </ul> 26 </li> 27 </ul> 28 </nav> 29 30 </div> 31 </header> 32 33 <div id="contents"> 34 <p>コンテンツ</p> 35 36 <!-- /#contents --> 37 </div> 38 <!-- /#wrap --> 39 </div>

css

1nav { 2 -webkit-transition: 0.3s ease-in-out; 3 -moz-transition: 0.3s ease-in-out; 4 transition: 0.3s ease-in-out; 5} 6 7.clearfix:before, 8.clearfix:after { 9 content: " "; 10 display: table; 11} 12 13.clearfix:after { 14 clear: both; 15} 16 17.clearfix { 18 *zoom: 1; 19} 20 21body { 22 font-family: 'Questrial', Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; 23} 24 25.fixed { 26 position:fixed; 27 top:0; 28 left:0; 29 width:100%; 30} 31 32/* オーバーレイ */ 33.overlay { 34 position: fixed; 35 top: 0; 36 left: 0; 37 display: none; 38 width: 100%; 39 height: 100%; 40 background: #000; 41 opacity: 0.7; 42 filter: alpha(opacity=70); 43 -ms-filter: "alpha(opacity=70)"; 44 z-index: 999; 45} 46 47/* ヘッダー */ 48header { 49 position:fixed; 50 top:0; 51 left:0; 52 width:100%; 53 background:#fff; 54 box-shadow: 0 2px 5px rgba(0,0,0,0.26); 55 z-index:9999; 56 -webkit-user-select:none; 57 -moz-user-select:none; 58 user-select:none; 59} 60header .inner { 61 position:relative; 62 width:100%; 63 margin:0 auto; 64 padding:30px 0; 65 -webkit-box-sizing:border-box; 66 -moz-box-sizing:border-box; 67 box-sizing:border-box; 68} 69 70/* ナビゲーション */ 71header nav { 72 float:right; 73 width: 80%; 74} 75/* ナビゲーション:アクティブ時 */ 76header.navOpen nav { 77 opacity: 1; 78 left: 0; 79} 80header nav ul { 81} 82header nav ul li { 83 float:left; 84 width: 16.6666%; 85 border-bottom:1px solid #ccc; 86} 87header nav ul li a { 88 position:relative; 89 display:block; 90 padding:1.5em; 91 color:#999; 92 text-decoration:none; 93} 94header nav ul li a:hover { 95 background:#f2f2f2; 96} 97 98/* ナビゲーションアイコン */ 99header .navBtn { 100 display: none; 101 width: 30px; 102 position: absolute; 103 top: 3px; 104 left: 15px; 105 cursor: pointer; 106} 107header .navBtn span { 108 display: block; 109 height: 4px; 110 width: 100%; 111 background: #E60012; 112 border-radius: 2px; 113 -webkit-transition: all .5s ease-in-out; 114 -moz-transition: all .5s ease-in-out; 115 transition: all .5s ease-in-out; 116} 117header .navBtn span:nth-of-type(2), 118header .navBtn span:nth-of-type(3) { 119 margin-top: 5px; 120} 121/* ナビゲーションアイコン:アクティブ */ 122header.navOpen .navBtn span:nth-of-type(1) { 123 -webkit-transform: translateY(9px) translateX(0) rotate(45deg); 124 -ms-transform: translateY(9px) translateX(0) rotate(45deg); 125 transform: translateY(9px) translateX(0) rotate(45deg); 126} 127header.navOpen .navBtn span:nth-of-type(2) { 128 margin-top: 5px; 129 opacity: 0; 130 -webkit-transform: translateY(9px); 131 -ms-transform: translateY(9px); 132 transform: translateY(9px); 133} 134header.navOpen .navBtn span:nth-of-type(3) { 135 -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); 136 -ms-transform: translateY(-9px) translateX(0) rotate(-45deg); 137 transform: translateY(-9px) translateX(0) rotate(-45deg); 138} 139 140#contents { 141 max-width: 1080px; 142 margin:120px auto 0; 143 /*padding:1em 1.5em;*/ 144 line-height:1.5; 145} 146#contents p { 147 margin-bottom:1em; 148} 149 150/* レスポンシブ */ 151@media screen and (max-width:767px){ 152 header .navBtn { 153 display:block; 154 } 155 header nav { 156 overflow:auto; 157 position: fixed; 158 top: 0; 159 left: -70%; 160 float:none; 161 width: 70%; 162 max-width:320px; 163 height: 100%; 164 background: #fff; 165 opacity: 0; 166 z-index:9999; 167 } 168 header nav ul li { 169 float: none; 170 width: auto; 171 list-style-type: none; 172 } 173 #contents { 174 margin-top:80px; 175 } 176} 177.clearfix{ 178 padding-left: 0; 179} 180 181 182/***/ 183.clearfix:before, 184.clearfix:after { 185 content: " "; 186 display: table; 187} 188 189.clearfix:after { 190 clear: both; 191} 192 193.clearfix { 194 *zoom: 1; 195} 196.fixed { 197 position:fixed; 198 top:0; 199 left:0; 200 width:100%; 201} 202 203/* オーバーレイ */ 204.overlay { 205 position: fixed; 206 top: 0; 207 left: 0; 208 display: none; 209 width: 100%; 210 height: 100%; 211 background: #000; 212 opacity: 0.7; 213 filter: alpha(opacity=70); 214 -ms-filter: "alpha(opacity=70)"; 215 z-index: 999; 216} 217 218/* ヘッダー */ 219header { 220 position:fixed; 221 top:0; 222 left:0; 223 width:100%; 224 background:#fff; 225 box-shadow: 0 2px 5px rgba(0,0,0,0.26); 226 z-index:9999; 227 -webkit-user-select:none; 228 -moz-user-select:none; 229 user-select:none; 230} 231header h1 { 232 float:left; 233 width:20%; 234 margin-top: 1em; 235 font-size:1.5em; 236 font-weight:bold; 237} 238 239/* ナビゲーション */ 240header nav { 241 float:right; 242 width: 80%; 243} 244/* ナビゲーション:アクティブ時 */ 245header.navOpen nav { 246 opacity: 1; 247 right: 0; 248} 249header nav ul { 250 width: 100%; 251 border-top:1px solid #ccc; 252} 253/* ナビゲーションアイコン */ 254header .navBtn { 255 display: none; 256 width: 30px; 257 position: absolute; 258 right: 15px; 259 cursor: pointer; 260} 261 262header .navBtn span:nth-of-type(2), 263header .navBtn span:nth-of-type(3) { 264 margin-top: 5px; 265} 266/* ナビゲーションアイコン:アクティブ */ 267header.navOpen .navBtn span:nth-of-type(1) { 268 -webkit-transform: translateY(9px) translateX(0) rotate(45deg); 269 -ms-transform: translateY(9px) translateX(0) rotate(45deg); 270 transform: translateY(9px) translateX(0) rotate(45deg); 271} 272header.navOpen .navBtn span:nth-of-type(2) { 273 margin-top: 5px; 274 opacity: 0; 275 -webkit-transform: translateY(9px); 276 -ms-transform: translateY(9px); 277 transform: translateY(9px); 278} 279header.navOpen .navBtn span:nth-of-type(3) { 280 -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg); 281 -ms-transform: translateY(-9px) translateX(0) rotate(-45deg); 282 transform: translateY(-9px) translateX(0) rotate(-45deg); 283} 284 285#contents { 286 max-width: 1080px; 287 margin:120px auto 0; 288 padding:1em 1.5em; 289 line-height:1.5; 290} 291#contents p { 292 margin-bottom:1em; 293} 294 295/* レスポンシブ */ 296@media screen and (max-width:1080px){ 297 header .inner { 298 padding: 1.5em; 299 } 300 header h1 { 301 width: 30%; 302 margin-top: 0em; 303 } 304 header nav { 305 width:70%; 306 } 307 header nav ul li { 308 width: 33.333%; 309 } 310 #contents { 311 margin-top:180px; 312 } 313} 314@media screen and (max-width:640px){ 315 header h1 { 316 width: auto; 317 margin-top: 0; 318 } 319 header .navBtn { 320 display:block; 321 } 322 header nav { 323 overflow:auto; 324 position: fixed; 325 top: 0; 326 right: -70%; 327 float:none; 328 width: 70%; 329 max-width:320px; 330 height: 100%; 331 background: #fff; 332 opacity: 0; 333 z-index:9999; 334 } 335 header nav ul li { 336 float: none; 337 width: auto; 338 } 339 #contents { 340 margin-top:80px; 341 } 342} 343.toggle ul{ 344 display: none; 345 padding: 0; 346} 347.toggle ul{ 348 display: none; 349 padding: 0; 350} 351.toggle ul.menu li a{ 352 padding-left: 40px; 353} 354

jQuery

1 2$(function(){ 3// オーバーレイ作成 4$('#contents').prepend('<div class="overlay"></div>'); 5 6// アイコンをクリックしたら 7$('.navBtn').click(function() { 8 $('header').toggleClass('navOpen'); // class付与/削除 9 $('#wrap').toggleClass('fixed'); // コンテンツを固定/解除 10 $('.overlay').toggle(); // オーバーレイ表示/非表示 11 12 // スマホナビゲーションがヘッダーに被らないようにする 13 var headerH = $('header').outerHeight(); 14 if ($('header').hasClass('navOpen')) { 15 $('header nav').css('marginTop', '44px'); //ヘッダーの高さ分マージンを付ける 16 } 17}); 18 19// オーバーレイをクリックしたら 20$('.overlay').click(function() { 21 $(this).fadeOut(300); // オーバーレイ非表示 22 $('header').removeClass('navOpen'); // class削除 23 $('#wrap').removeClass('fixed'); // 固定解除 24}); 25 26// スマホサイズからPCになったとき 27$(window).on('load resize', function() { 28 var breakpoint = 640; 29 if (window.innerWidth > breakpoint) { 30 $('header').removeClass('navOpen'); // class削除 31 $('#wrap').removeClass('fixed'); // 固定解除 32 $('.overlay').hide(); // オーバーレイ非表示 33 $('header nav').css('marginTop', 0 + 'px'); // マージン削除 34 } 35}); 36}); 37 38 39$(function(){ 40 $(".toggle").click(function(){ 41 $(".menu").slideToggle(); 42 return false; 43 }); 44 $(window).resize(function(){ 45 var win = $(window).width(); 46 var p = 480; 47 if(win > p){ 48 $(".menu").show(); 49 } else { 50 $(".menu").hide(); 51 } 52 }); 53}); 54

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascript

1$(".toggle").click(function(){ 2 $(".menu").slideToggle(); /*全ての.menuが対象になってしまっている*/ 3 return false; 4 });

$(".toggle")をクリックした時に、**「いまクリックしたDOMの子要素である.menu」**だけを対象にslideToggle()を実行するようにコードを書き換える必要があります。
**「いまクリックしたDOM」**を表すための機能として$(this)がありますので、これを使ってslideToggle()させる対象領域を絞り込み、そこからトラベリング機能を使って$(this).find(".menu")というセレクタを作ればいけると思います。

JavaScript

1$(".toggle").click(function(){ 2 $("this").find(".menu").slideToggle();/*クリックした.toggleの子要素の.menuだけを対象にする*/ 3 return false; 4 });

こんな感じ?(※試してないので動かなかったらごめんなさい)

投稿2016/07/12 10:26

編集2016/07/12 10:27
aKusano

総合スコア3763

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

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

yucco

2016/07/12 10:37

お早い回答ありがとうございます。 試してみたのですが、アコーディオンが反応しなくなってしまいました。 他に解決策はありますでしょうか…
aKusano

2016/07/12 10:41

おや?ご提示いただいたコードをコピペして手元で確認してみたところ、 こちらではちゃんと動いていましたが、書き換えた所をスペルミスしたりしていませんか? あと、Chromeのデベロッパーツール等でどんなエラーが出ているか念のため確認してみてください。
aKusano

2016/07/12 10:42

あ!すみません。$("this")ではなく、$(this)の間違いでした!!! 失礼しました。こちらでご確認ください。
yucco

2016/07/12 10:44

ありがとうございます! 解決できました!
tama_yn0815

2016/07/12 11:01

回答者さんの内容を抜粋して、コメントします $("this").find(".menu")の"this"ですが、これでは、文字列扱いで、cssセレクターでjqueryエレメントを生成してます。 $("this").find(".menu")を以下に直してみてください ↓ $(this).find(".menu") このthisは、jqueryでディスパッチしているイベントにて、 動的に実行関数click(function(){})の関数を組み替えて実行されているので、 スコープが、イベントハンドラ内に移動している(この場合、thisはイベントの起きたDOMをさしています。) おそらく、質問者様は、jqueryのスコープと合わせて、javascriptのスコープを調べられると参考になると思います。 また、好き好きですが、jquery本家推奨のイベント発付方法で、記述した場合の方法を記述します。 $('.toggle').on('click',function(){ $(this).find(".menu").slideToggle(); //$()のreturnは、new されたjqueryオブジェクです...参考までに、常にinstanceが生成されることを留意ください(^^; return false; });
tama_yn0815

2016/07/12 11:02

回答者さまから、回答きてましたね 失礼しました....解決して何よりです。
yucco

2016/07/12 11:11

yuki_nishida様もご回答ありがとうございます。 また、ご教授いただいた点に関しましても、今後の参考にさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問