###実装したいこと
先ほどドロップダウンメニューが表示されない問題を解決いたしまして次の問題が出てきてしまったので
何度もすいませんが質問させていただきます。
メニュー1をクリックしたらドロップダウンメニューが画面全体に表示
↓
表示させたままメニュー2をクリックするとメニュー1のドロップダウンの上にメニュー2のドロップダウンが画面全体に表示される
↓
メニュー2を×で消すとメニュー1で表示されているドロップダウンが表示されたままになっている
また逆の順番でメニュー2のドロップダウンを開けたままメニュー1をクリックすると切り替わらずメニュー2のドロップダウンが表示されている
伝わりにくいと思ったので箇条書きにさせていただきました。
下記のコードで切り替わらない原因など教えていただければと思っております。
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アニメーションで×になる1 --> 2 <a class="menu-trigger" href="#"> 3 <span></span> 4 <span></span> 5 <span></span> 6 </a> 7</div> 8<!-- ドロップダウンで表示される内容1 --> 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アニメーションで×になる2 --> 29 <a class="menu-trigger2" href="#"> 30 <span></span> 31 <span></span> 32 <span></span> 33 </a> 34</div> 35<!-- ドロップダウンで表示される内容2 --> 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件
あなたの回答
tips
プレビュー