前提・実現したいこと
▶リスト1 ▶リスト2
↑を画面とします。
画面には文字が表示され、たとえば「リスト1」をクリックすると
↓のように表が表示されるようにしたいです。
▼リスト1 ▶リスト2 ------------- |項目1|説明1| |項目2|説明2| -------------
また、「リスト1」をクリックして「リスト2」をクリックした場合、「リスト1」の表は非表示にして「リスト2」の表が表示されるようにしたいです。
発生している問題・エラーメッセージ
クリックしても表が表示されません。
エラーメッセージも出力されません。
該当のソースコード
html
1<div class="row test"> 2 <label for="li1"><span>list1</span></label> 3 <label for="li2"><span>list2</span></label> 4 <br/><br/> 5 <div class="test-checkbox"> 6 <input type="checkbox" id="li1"> 7 <div> 8 <table class="test-table"> 9 <tr> 10 <th>項目a</th> 11 <td>詳細a</td> 12 </tr> 13 <tr> 14 <th>項目b</th> 15 <td>詳細b</td> 16 </tr> 17 </table> 18 </div> 19 20 <input type="checkbox" id="li2"> 21 <div> 22 <table class="test-table"> 23 <tr> 24 <th>項目c</th> 25 <td>詳細c</td> 26 </tr> 27 <tr> 28 <th>項目d</th> 29 <td>詳細d</td> 30 </tr> 31 </table> 32 </div> 33 </div> 34</div>
css
1.test input { 2 display: none; 3} 4 5.test-checkbox div { 6 height: 0; 7 padding: 0; 8 overflow: hidden; 9 opacity: 0; 10 transition: 0.8s; 11} 12 13.test-table { 14 table-layout: fixed; 15 vertical-align: top; 16 white-space: nowrap; 17} 18 19.test-table th { 20 padding-right: 10px; 21 width: 100%; 22 text-align: right; 23} 24 25.test-table td { 26 width: 100%; 27 text-align: left; 28}
js
1$('.test label').on('click', function(e){ 2 var idValue = e.target.htmlFor; 3 4 $('test-checkbox').hide(); 5 6 $('input#' + idValue).show(); 7});
試したこと
js
1$(idValue + ' div').fadeIn(); 2$('input#'+idValue).fadeIn(); 3$('input#'+idValue+' > *').show();
↑を書いてみたのですが変わらず表示されません。
ご教授のほどよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/13 00:20