Q&A
アコーディオンとはどの部分ですか？「アイテム1 」のところですか？
前提・実現したいこと
ブートストラップでアコーディオンを実装したい。
発生している問題・エラーメッセージ
アコーディオンが正常に動作しない。アコーディオンをクリックすると、ページトップに戻ってしまう。 bootstrapの他にも、drawer.jsを入れているのですがこちらは正常に動作します。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title></title> 8 <!-- googlefonts --> 9 <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700&display=swap" rel="stylesheet"> 10 <!-- fontawesome --> 11 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous"> 12 <!-- Bootstrap css --> 13 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 14 <!-- drawer.css --> 15 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> 16 <!-- Custom css --> 17 <link rel="stylesheet" href="css/style.min.css"> 18 </head> 19 <body class="drawer drawer--right"> 20 <!-- header --> 21 <header> 22 <div class="header-inner"> 23 <div class="header-logo"> 24 <img src="img/logo/logo.png" alt="The compay"> 25 </div> 26 <ul class="header-nav"> 27 <li><a href="#nav1" class="cardnav">Card</a></li> 28 <li><a href="#nav2" class="newsnav">News</a></li> 29 <li><a href="#nav3" class="pricenav">Price</a></li> 30 <li><a href="#nav4" class="accessnav">Access</a></li> 31 <li><a href="#nav5" class="contactnav">Contact</a></li> 32 </ul> 33 <button type="button" class="drawer-toggle drawer-hamburger"> 34 <span class="sr-only">toggle navigation</span> 35 <span class="drawer-hamburger-icon"></span> 36 </button> 37 <nav class="drawer-nav" role="navigation"> 38 <ul class="drawer-menu"> 39 <li class="active"><a class="drawer-menu-item" href="#">Card<img src="img/arrow-b.svg" alt=""></a></li> 40 <li><a class="drawer-menu-item" href="#">News<img src="img/arrow-b.svg" alt=""></a></li> 41 <li><a class="drawer-menu-item" href="#">Price<img src="img/arrow-b.svg" alt=""></a></li> 42 <li><a class="drawer-menu-item" href="#">Access<img src="img/arrow-b.svg" alt=""></a></li> 43 <li><a class="drawer-menu-item" href="#">Contact<img src="img/arrow-b.svg" alt=""></a></li> 44 </ul> 45 </nav> 46 </div> 47 </header> 48 <!-- main --> 49 <div class="main"> 50 <!-- top --> 51 <div class="top"> 52 <div class="top-inner"> 53 <h1>一番伝えたいことを書く</h1> 54 <span>リードリードリード</span> 55 <div class="contact-btn"> 56 <a href="#">お問い合わせ</a> 57 </div> 58 </div> 59 </div> 60 61 <!-- access --> 62 <div class="access" id="nav4"> 63 <div class="access-inner"> 64 <h3>Access</h3> 65 <div class="map"> 66 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3214.9604632401165!2d140.56704551473976!3d36.31326560265801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6022313c154eaaab%3A0xe7c2d8373d6a2abd!2z44G744GS44G744GS44Kr44OV44Kn!5e0!3m2!1sja!2sjp!4v1585054177912!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> 67 <div class="access-detail"> 68 <p><span>住所</span>ホゲホゲホゲのホゲの場所</p> 69 <p><span>アクセス</span>○○駅から右に5分</p> 70 </div> 71 <div class="access-btn"> 72 <a href="#">Googleマップで見る</a> 73 </div> 74 </div> 75 </div> 76 </div> 77 78 <!-- qanda --> 79 <div class="qanda"> 80 <div class="qanda-inner"> 81 <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true"> 82 <div class="card"> 83 <div class="card-header" role="tab" id="headingOne"> 84 <h5 class="mb-0"> 85 <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne"> 86 アイテム1 87 </a> 88 </h5> 89 </div><!-- /.card-header --> 90 <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> 91 <div class="card-body"> 92 アイテム1のコンテンツ 93 </div><!-- /.card-body --> 94 </div><!-- /.collapse --> 95 </div><!-- /.card --> 96 <div class="card"> 97 <div class="card-header" role="tab" id="headingTwo"> 98 <h5 class="mb-0"> 99 <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo"> 100 アイテム2 101 </a> 102 </h5> 103 </div><!-- /.card-header --> 104 <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> 105 <div class="card-body"> 106 アイテム2のコンテンツ 107 </div><!-- /.card-body --> 108 </div><!-- /.collapse --> 109 </div><!-- /.card --> 110 <div class="card"> 111 <div class="card-header" role="tab" id="headingThree"> 112 <h5 class="mb-0"> 113 <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree"> 114 アイテム3 115 </a> 116 </h5> 117 </div><!-- /.card-header --> 118 <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"> 119 <div class="card-body"> 120 アイテム3のコンテンツ 121 </div><!-- /.card-body --> 122 </div><!-- /.collapse --> 123 </div><!-- /.card --> 124 </div><!-- /#accordion --> 125 </div> 126 </div> 127 128 129 130 <!-- トップへ戻るボタン --> 131 <div class="page_top"><a href="#"></a></div> 132 133 134 <!-- jQuery --> 135 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 136 <!-- jquery & iScroll --> 137 <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 138 <!-- drawer.js --> 139 <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> 140 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 141 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 142 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 143 144 <!-- Optional javascript --> 145 <script type="text/javascript"> 146 147 $(function(){ 148 149 $(window).on("load", function() { 150 var _radio = []; 151 $('input.radio').on('click', function() { 152 var _this = $(this); 153 var _name = _this.attr('name'); 154 var _val = _this.val(); 155 156 if (_radio[_name] === '' || _radio[_name] === null || _radio[_name] === undefined) { 157 _radio[_name] = _val; 158 } else { 159 if (_radio[_name] == _val) { 160 _this.prop('checked', false); 161 _radio[_name] = ''; 162 } else { 163 _radio[_name] = _val; 164 } 165 } 166 }); 167 }); 168 169 var pagetop = $('.page_top'); 170 // ボタン非表示 171 pagetop.hide(); 172 // 100px スクロールしたらボタン表示 173 $(window).scroll(function () { 174 if ($(this).scrollTop() > 100) { 175 pagetop.fadeIn(); 176 } else { 177 pagetop.fadeOut(); 178 } 179 }); 180 pagetop.click(function () { 181 $('body, html').animate({ scrollTop: 0 }, speed, 'swing'); 182 return false; 183 }); 184 185 // スムーススクロール 186 // #で始まるアンカーをクリックした場合に処理 187 $('a[href^="#"]').click(function(){ 188 // 移動先を50px上にずらす 189 if (window.matchMedia( "(max-width: 768px)" ).matches) { 190 var adjust = 60; 191 } else { 192 var adjust = 100; 193 } 194 // スクロールの速度 195 var speed = 400; // ミリ秒 196 // アンカーの値取得 197 var href= $(this).attr("href"); 198 // 移動先を取得 199 var target = $(href == "#" || href == "" ? 'html' : href); 200 // 移動先を調整 201 var position = target.offset().top - adjust; 202 // スムーススクロール 203 $('body,html').animate({scrollTop:position}, speed, 'swing'); 204 return false; 205 }); 206 207 $(window).scroll(function () { 208 var selectors = $('#nav1, #nav2, #nav3, #nav4, #nav5'); 209 var scroll = $(window).scrollTop(); 210 selectors.each(function () { 211 var position = $(this).offset().top - $(window).height(); 212 if (position < scroll) { 213 $(this).addClass("active"); 214 } 215 }); 216 }); 217 218 $('.drawer').drawer(); 219 220 }); 221 222 </script> 223 224 </body> 225</html>
試したこと
jQueryの読み込み位置を変えてみたり、drawer.jsが原因かと思い、bootstrapのみを読み込んで試してみたのですが、動作しませんでした。
補足情報（FW/ツールのバージョンなど）
ローカルの環境で行っています。
回答2件
0
ベストアンサー
イベントリスナの中でreturn falseを実行すると、イベントの伝播を妨げますので、アコーディオンの開閉処理をするイベントリスナが呼ばれていないのだと思います。
js
1 // スムーススクロール 2 // #で始まるアンカーをクリックした場合に処理 3 $('a[href^="#"]').click(function(){ 4 // 移動先を50px上にずらす 5 if (window.matchMedia( "(max-width: 768px)" ).matches) { 6 var adjust = 60; 7 } else { 8 var adjust = 100; 9 } 10 // スクロールの速度 11 var speed = 400; // ミリ秒 12 // アンカーの値取得 13 var href= $(this).attr("href"); 14 // 移動先を取得 15 var target = $(href == "#" || href == "" ? 'html' : href); 16 // 移動先を調整 17 var position = target.offset().top - adjust; 18 // スムーススクロール 19 $('body,html').animate({scrollTop:position}, speed, 'swing'); 20 return false; /* ←ここ */ 21 });
投稿2020/03/31 03:32
総合スコア36960
0
jQuery
1// スムーススクロール 2 // #で始まるアンカーをクリックした場合に処理 3 $('a[href^="#"]').click(function(){ 4 // 移動先を50px上にずらす 5 if (window.matchMedia( "(max-width: 768px)" ).matches) { 6 var adjust = 60; 7 } else { 8 var adjust = 100; 9 } 10 // スクロールの速度 11 var speed = 400; // ミリ秒 12 // アンカーの値取得 13 var href= $(this).attr("href"); 14 // 移動先を取得 15 var target = $(href == "#" || href == "" ? 'html' : href); 16 // 移動先を調整 17 var position = target.offset().top - adjust; 18 // スムーススクロール 19 $('body,html').animate({scrollTop:position}, speed, 'swing'); 20 return false; 21 });
この部分の、$('a[href^="#"]').click(function(){を$('header-nav > a[href^="#"]').click(function(){に変えると正常に動作しました。
投稿2020/03/31 13:43
総合スコア11
あなたの回答
tips
プレビュー
