Q&A
php関係ないですよね？
###実装したいこと
先ほどドロップダウンメニューが表示されない問題を解決いたしまして次の問題が出てきてしまったので
何度もすいませんが質問させていただきます。
メニュー１をクリックしたらドロップダウンメニューが画面全体に表示
↓
表示させたままメニュー２をクリックするとメニュー１のドロップダウンの上にメニュー２のドロップダウンが画面全体に表示される
↓
メニュー２を×で消すとメニュー１で表示されているドロップダウンが表示されたままになっている
また逆の順番でメニュー２のドロップダウンを開けたままメニュー１をクリックすると切り替わらずメニュー２のドロップダウンが表示されている
伝わりにくいと思ったので箇条書きにさせていただきました。
下記のコードで切り替わらない原因など教えていただければと思っております。
JavaScript
1$(function() { 2 $(".menu-trigger").click(function() { 3 $("#panel").slideToggle(350); 4 $(".menu-trigger").toggleClass('active'); 5 return false; 6 }); 7}); 8 9$(function(){ 10 $(".spmenuin_li a").click(function(){ 11 $(this).next("ul").slideToggle(); 12 $(this).toggleClass("open"); 13 }); 14}); 15 16$(function() { 17 $(".menu-trigger2").click(function() { 18 $("#panel2").slideToggle(350); 19 $(".menu-trigger2").toggleClass('active'); 20 return false; 21 }); 22});
HTML
1<div id="spbatsu" class="pcnone"><!-- 三本線のメニュー、cssアニメーションで×になる１ --> 2 <a class="menu-trigger" href="#"> 3 <span></span> 4 <span></span> 5 <span></span> 6 </a> 7</div> 8<!-- ドロップダウンで表示される内容１ --> 9<div id="panel"> 10 <div id="panel_in"> 11 <ul id="panel_in_ul"> 12 <li class="spmenuin_li"><a href="#">トップページ</a></li> 13 <li class="spmenuin_li spyazi"><a href="#" class="panel_in_li">店舗一覧</a> 14 <ul class="spmenuin_li_in"> 15 <li><a href="#" class="spmenuin_li_in_li">●●店</a></li> 16 <li><a href="#" class="spmenuin_li_in_li">●●店</a></li> 17 </ul> 18 </li> 19 <li class="spmenuin_li spyazi"><a href="#" class="panel_in_li">メニュー</a> 20 <ul class="spmenuin_li_in"> 21 <li><a href="#" class="spmenuin_li_in_li">ランチメニュー/a></li> 22 <li><a href="#" class="spmenuin_li_in_li">ディナーメニュー</a></li> 23 </ul> 24 </li> 25 </ul> 26 </div> 27</div> 28<div id="spbatsu2" class="pcnone"><!-- 三本線のメニュー、cssアニメーションで×になる２ --> 29 <a class="menu-trigger2" href="#"> 30 <span></span> 31 <span></span> 32 <span></span> 33 </a> 34</div> 35<!-- ドロップダウンで表示される内容２ --> 36<div id="panel2"> 37 <div id="panel_in2"> 38 <p class="yoyakup">レストラン</p> 39 <div class="spbtm"><a href="#">予約</a></div> 40 <p><a href="tel:0123456789" class="sp_tel_ablack">0123456789</a></p> 41 <p>定休日：なし</p> 42 <hr /> 43 <p class="yoyakup">カフェ</p> 44 <div class="spbtm"><a href="#">予約</a></div> 45 <p><a href="tel:0123456789" class="sp_tel_ablack">0123456789</a></p> 46 <p>定休日：なし</p> 47 </div> 48</div>
HTML
1/* SPメニューここから */ 2 #panel {display: none; width: 100%; margin: 0; padding: 20px 0 35px 50px; background: #fff; z-index: 100; position: fixed; top: 60px; font-size: 13px; overflow-y: scroll; width: 100%; height: 100%;} 3 #panel a{color:#000;} 4 #panel2 {display: none; width: 100%; margin: 0; padding: 0; background: #fff; z-index: 100; position: fixed; top: 60px; right: 0px; font-size: 13px; overflow-y: scroll; width: 100%; height: 100%;} 5 6 #panel_in2{padding:20px; text-align: center;} 7 #panel_in2 .yoyakup{padding-bottom: 0.5em; font-weight: bold;} 8 9 .panel_in_li{font-size: 13px;} 10 11 .menu-trigger, 12 .menu-trigger span { 13 display: inline-block; 14 transition: all .4s; 15 box-sizing: border-box; 16 z-index: 100; 17 } 18 .menu-trigger { 19 position: relative; 20 position: fixed; 21 width: 32px; 22 height: 16px; 23 } 24 .menu-trigger span { 25 position: absolute; 26 left: 0; 27 width: 100%; 28 height: 2px; 29 background-color: #000; 30 } 31 .menu-trigger span:nth-of-type(1) { 32 top: 0; 33 } 34 .menu-trigger span:nth-of-type(2) { 35 top: 7px; 36 } 37 .menu-trigger span:nth-of-type(3) { 38 bottom: 0; 39 } 40 .menu-trigger.active span:nth-of-type(1) { 41 -webkit-transform: translateY(7px) rotate(-45deg); 42 transform: translateY(7px) rotate(-45deg); 43 } 44 .menu-trigger.active span:nth-of-type(2) { 45 opacity: 0; 46 } 47 .menu-trigger.active span:nth-of-type(3) { 48 -webkit-transform: translateY(-7px) rotate(45deg); 49 transform: translateY(-7px) rotate(45deg); 50 } 51 52 #spbatsu{ 53 width:32px; 54 position: absolute; 55 top: 20px; 56 left: 15px; 57 } 58 59 .menu-trigger2, 60 .menu-trigger2 span { 61 display: inline-block; 62 transition: all .4s; 63 box-sizing: border-box; 64 z-index: 100; 65 } 66 .menu-trigger2 { 67 position: relative; 68 position: fixed; 69 width: 32px; 70 height: 16px; 71 } 72 .menu-trigger2 span { 73 position: absolute; 74 left: 0; 75 width: 100%; 76 height: 2px; 77 background-color: #000; 78 } 79 .menu-trigger2 span:nth-of-type(1) { 80 top: 0; 81 } 82 .menu-trigger2 span:nth-of-type(2) { 83 top: 7px; 84 } 85 .menu-trigger2 span:nth-of-type(3) { 86 bottom: 0; 87 } 88 .menu-trigger2.active span:nth-of-type(1) { 89 -webkit-transform: translateY(7px) rotate(-45deg); 90 transform: translateY(7px) rotate(-45deg); 91 } 92 .menu-trigger2.active span:nth-of-type(2) { 93 opacity: 0; 94 } 95 .menu-trigger2.active span:nth-of-type(3) { 96 -webkit-transform: translateY(-7px) rotate(45deg); 97 transform: translateY(-7px) rotate(45deg); 98 } 99 100 #spbatsu2{ 101 width:32px; 102 position: absolute; 103 top: 20px; 104 left: 15px; 105 }
回答1件
0
ベストアンサー
サンプルを確認できないのであれですが片側activeにしたら
片側外せばいいんじゃないかと。
panel操作追記
javascript
1$(function() { 2 $(".menu-trigger").click(function() { 3 $("#panel").slideToggle(350); 4 $(".menu-trigger").toggleClass('active'); 5//ここ 6 $(".menu-trigger2").removeClass('active'); 7//誤字訂正 8 $("#panel2").slideUp(350); 9 return false; 10 }); 11}); 12 13$(function(){ 14 $(".spmenuin_li a").click(function(){ 15 $(this).next("ul").slideToggle(); 16 $(this).toggleClass("open"); 17 }); 18}); 19 20$(function() { 21 $(".menu-trigger2").click(function() { 22 $("#panel2").slideToggle(350); 23 $(".menu-trigger2").toggleClass('active'); 24//ここ 25 $(".menu-trigger").removeClass('active'); 26//誤字訂正 27 $("#panel").slideUp(350); 28 return false; 29 }); 30});
投稿2018/01/18 08:22
編集2018/01/18 09:44総合スコア3828
ご回答ありがとうございます。
いただきました「active」を追加させていただきましたがダウンメニューは消えず
×の部分だけ三本線に切り替わります。
active指定を×とクリックで表示される要素に指定すれば切り替わりますでしょうか？
panelも操作しないといけないようですね。追記
追記までありがとうございます。
#panel と #panel2 も追加させていただきましたが先ほどと同じ×の部分だけ切り変わるのみで
slideUpされません。consoleで確認してもエラーは出ていないようです…
何か他に代用できる策はご存知でしょうか？お手数とお時間かけさせてしまって大変申し訳ないです。
誤字してました。
sousuke様
無事に開閉させることができました！
何度も追加で質問してしまってお手数おかけしました。
本当にありがとうございました！
あなたの回答
tips
プレビュー
