前提・実現したいこと
アコーディオンの構造にならない。
http://algo13.net/bootstrap/collapse.html のサイトのlist-groupの部分を参考に、
アコーディオンを作ろうとしている。
該当のソースコード
javascript
1<script type="text/javascript"> 2 3 jQuery.noConflict(); 4 $q = jQuery; 5 6 (function($) { 7 'use strict'; 8 $q('#qdate').on({ 9 10 'show.bs.collapse': function() { 11 $q('a[href="#' + this.id + '"] span.glyphicon-chevron-down') 12 .removeClass('glyphicon-chevron-down') 13 .addClass('glyphicon-chevron-up'); 14 }, 15 16 'hide.bs.collapse': function() { 17 $q('a[href="#' + this.id + '"] span.glyphicon-chevron-up') 18 .removeClass('glyphicon-chevron-up') 19 .addClass('glyphicon-chevron-down'); 20 } 21 }); 22 23 $q('a[href="#qdate"]').on('click', function(event) { 24 event.preventDefault(); 25 }); 26 })(jQuery); 27 28</script>
HTML
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 2 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 3 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> 4 5 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css" > 6 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 8 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 9 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"> 11 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.ja.min.js"></script> 13 14<h3>ユーザーデータ</h3> 15 16 <div id="panel"> 17 18 <a href="#qdate" class="list-group-item" data-toggle="collapse" data-target="#qdate" data-parent="#panel"> 19 <span class="glyphicon glyphicon-envelope">User1</span> 20 <span class="glyphicon glyphicon-chevron-down pull-right"></span> 21 </a> 22 <table> 23 <tr> 24 <th>名前</th> 25 26 <th>年齢</th> 27 28 <th>住所</th> 29 </tr> 30 31 <tr> 32 <td>Tom</td> 33 34 <td>45</td> 35 36 <td> 37 <ul> 38 39 <li>アメリカ</li> 40 41 <li>ニューヨーク</li> 42 43 <li>1-100-40</li> 44 45 </ul> 46 </td> 47 </tr> 48 </table> 49 50 51 <table> 52 <tr> 53 <th>名前</th> 54 55 <th>年齢</th> 56 57 <th>住所</th> 58 </tr> 59 60 <tr> 61 <td>John</td> 62 63 <td>29</td> 64 65 <td> 66 <ul> 67 68 <li>イギリス</li> 69 70 <li>ロンドン</li> 71 72 </ul> 73 </td> 74 </tr> 75 </table> 76 </div>
cssはない。
今のコードを実行すると、ただリンクの下にテーブルがある状態が表示される。aタグに下向きのという矢印を
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
の部分でつけているはずだが、それも表示されない。
参考サイトのようにaタグのリンクをクリックすると、table がアコーディオンで表示され、矢印が上向きに変わるようにしたい。
どうコードを修正すればいいか?
回答2件
あなたの回答
tips
プレビュー