Q&A
###分からないこと
ドロップダウンメニュー内に、ページ内リンクを設置しましたがクリックしても
ドロップダウンメニューが閉まらないままページ内リンクの指定した場所へ飛びます。
手動でドロップダウンメニューを閉じると先ほどクリックしたページ内リンクのところが出てきます。
javascriptに何か指定すれば解決するかと思うのですがその指定するコードがわからずこちらへ質問に参りました。
###実装したいこと
ドロップダウンメニュー内でページ内リンクをクリックするとドロップダウンメニューがしまわれる
下記コードです。
http://example#sample のURLはダミーです。
javascript
1$(function() { 2 $(".menu-trigger").click(function() { 3 $("#panel").slideToggle(350); 4 $(".menu-trigger").toggleClass('active'); 5 $(".menu-trigger2").removeClass('active'); 6 $("#panel2").slideUp(350); 7 return false; 8 }); 9}); 10 11$(function(){ 12 $(".spmenuin_li a").click(function(){ 13 $(this).next("ul").slideToggle(); 14 $(this).toggleClass("open"); 15 }); 16}); 17 18$(function() { 19 $(".menu-trigger2").click(function() { 20 $("#panel2").slideToggle(350); 21 $(".menu-trigger2").toggleClass('active'); 22 $(".menu-trigger").removeClass('active'); 23 $("#panel").slideUp(350); 24 return false; 25 }); 26});
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="http://example#sample" class="spmenuin_li_in_li">●●店</a></li> 16 <li><a href="http://example#sample2" 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>
css
1#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%;} 2 #panel a{color:#000;} 3 #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%;} 4 5 #panel_in2{padding:20px; text-align: center;} 6 #panel_in2 .yoyakup{padding-bottom: 0.5em; font-weight: bold;} 7 8 .panel_in_li{font-size: 13px;} 9 10 .menu-trigger, 11 .menu-trigger span { 12 display: inline-block; 13 transition: all .4s; 14 box-sizing: border-box; 15 z-index: 100; 16 } 17 .menu-trigger { 18 position: relative; 19 position: fixed; 20 width: 32px; 21 height: 16px; 22 } 23 .menu-trigger span { 24 position: absolute; 25 left: 0; 26 width: 100%; 27 height: 2px; 28 background-color: #000; 29 } 30 .menu-trigger span:nth-of-type(1) { 31 top: 0; 32 } 33 .menu-trigger span:nth-of-type(2) { 34 top: 7px; 35 } 36 .menu-trigger span:nth-of-type(3) { 37 bottom: 0; 38 } 39 .menu-trigger.active span:nth-of-type(1) { 40 -webkit-transform: translateY(7px) rotate(-45deg); 41 transform: translateY(7px) rotate(-45deg); 42 } 43 .menu-trigger.active span:nth-of-type(2) { 44 opacity: 0; 45 } 46 .menu-trigger.active span:nth-of-type(3) { 47 -webkit-transform: translateY(-7px) rotate(45deg); 48 transform: translateY(-7px) rotate(45deg); 49 } 50 51 #spbatsu{ 52 width:32px; 53 position: absolute; 54 top: 20px; 55 left: 15px; 56 } 57 58 .menu-trigger2, 59 .menu-trigger2 span { 60 display: inline-block; 61 transition: all .4s; 62 box-sizing: border-box; 63 z-index: 100; 64 } 65 .menu-trigger2 { 66 position: relative; 67 position: fixed; 68 width: 32px; 69 height: 16px; 70 } 71 .menu-trigger2 span { 72 position: absolute; 73 left: 0; 74 width: 100%; 75 height: 2px; 76 background-color: #000; 77 } 78 .menu-trigger2 span:nth-of-type(1) { 79 top: 0; 80 } 81 .menu-trigger2 span:nth-of-type(2) { 82 top: 7px; 83 } 84 .menu-trigger2 span:nth-of-type(3) { 85 bottom: 0; 86 } 87 .menu-trigger2.active span:nth-of-type(1) { 88 -webkit-transform: translateY(7px) rotate(-45deg); 89 transform: translateY(7px) rotate(-45deg); 90 } 91 .menu-trigger2.active span:nth-of-type(2) { 92 opacity: 0; 93 } 94 .menu-trigger2.active span:nth-of-type(3) { 95 -webkit-transform: translateY(-7px) rotate(45deg); 96 transform: translateY(-7px) rotate(45deg); 97 } 98 99 #spbatsu2{ 100 width:32px; 101 position: absolute; 102 top: 20px; 103 left: 15px; 104 }
勉強中で知識不足ですので
「ココにこの意味のコードを入力すればこうなる」といった事も教えていただけたら幸いです。
どなたかお分かりになられる方見えましたらお助け下さい。宜しくお願い致します。
回答1件
0
ベストアンサー
こんにちは。
ベストな修正方法とは思っていませんが、
以下の修正で、意図した動きに近づいているか
と思いますが、いかがでしょうか？
修正前： https://jsfiddle.net/jun68ykt/x2kbtua5/10/
上記においては、ご質問の JS のコードを、ひとつの $(function(){ ・・・ }); の中にまとめています。
修正案： https://jsfiddle.net/jun68ykt/x2kbtua5/25/
修正の要点としては、修正前 の以下のコード
javascript
1 $(".menu-trigger2").click(function() { 2 $("#panel2").slideToggle(350); 3 $(".menu-trigger2").toggleClass('active'); 4 $(".menu-trigger").removeClass('active'); 5 $("#panel").slideUp(350); 6 return false; 7 });
でクリックハンドラに設定している関数を、変数 menuTrigger2Handler に入れて
これを、予約や電話番号のリンクをクリックしたときのハンドラとしても使っていることです。
そのために、新たに menu-toggle というクラスを追加していますが、
これは、既存のクラス名 menu-trigger や menu-trigger2 と
意味的にかぶるので、クラス名を改善する余地があります。
また、上記の修正案で
javascript
1 return $(this).attr('href').match(/^tel:/) || $(this).text() == '予約' ? true : false;
とややこみ入ったコードになってしまっているように、var menuTrigger2Handler に
入れる関数が返す値の true だったり false だったりを適切に作る必要があるかと
思います。
以上参考になれば幸いです。
投稿2018/02/14 08:51
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/15 06:32
2018/02/15 06:56