Q&A
法則性はあるのでしょうか？
A→B,CでB→B'だと動きがばらばらです
B'はさらに増殖しないのですか？
前提・実現したいこと
以下のような階層構造を作成しようとしています。
Aボタンを押すとB・Cが現れ、B・Cボタンを押すと、それぞれB’・B"、C’・C"が現れるようなプログラムを作ろうとしています。
Aを押すと、Bが増殖するコードは以下のようにできますが、画像のようにはうまくできません。
コード
HTML
1<!DOCTYPE html> 2<html> 3<head><meta charset="utf-8"> 4<link rel="stylesheet"type="text/css"href="design.css"> 5 <title>clicktest</title> 6</head> 7 8 9<body> 10<div class="hidden_box"> 11 <label for="label1">A</label> 12 <input type="checkbox" id="label1"/> 13 <div class="hidden_show"> 14 15 <p> 16 17 <div class="hidden_box"> 18 <label for="label12">B</label> 19 <input type="checkbox" id="label12"/> 20 <div class="hidden_show"> 21 22 <div class="hidden_box"> 23 <label for="label13">B'</label> 24 <input type="checkbox" id="label13"/> 25 <div class="hidden_show"> 26 27 </p> 28 29 30 </div> 31</div> 32 <br> 33 34 </body> 35</html> 36
CSS
1.hidden_box { 2 margin: 2em 0; 3 padding: 0; 4} 5 6 7.hidden_box label { 8 padding: 15px; 9 font-weight: bold; 10 border: solid 2px black; 11 cursor :pointer; 12} 13 14 15.hidden_box label:hover { 16 background: #efefef; 17} 18 19 20.hidden_box input { 21 display: none; 22} 23 24 25.hidden_box .hidden_show { 26 height: 0; 27 padding: 0; 28 overflow: hidden; 29 opacity: 0; 30 transition: 0.8s; 31} 32 33 34.hidden_box input:checked ~ .hidden_show { 35 padding: 10px 0; 36 height: auto; 37 opacity: 1; 38}
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
A→B，C
B→B' ，B"
C→C'，C"
の動きになります。
B'もさらに増殖できれば…と考えていますが，今のところ予定はないです。
では最初から７つ作っておいて使わないのを隠せばいいでしょう
回答1件
0
ベストアンサー
こんな感じでどうでしょうか？
投稿2020/01/09 08:52
編集2020/01/09 08:56総合スコア114843
<style>
.hide{display:none}
[data-parent]{display:none}
#a:checked ~ * [data-parent=a]{display:inline}
#a:checked ~ #b:checked ~ * [data-parent=b]{display:inline}
#a:checked ~ #b:checked ~ #b1:checked ~ * [data-parent=b1]{display:inline}
#a:checked ~ #b:checked ~ #b2:checked ~ * [data-parent=b2]{display:inline}
#a:checked ~ #c:checked ~ * [data-parent=c]{display:inline}
#a:checked ~ #c:checked ~ #c1:checked ~ * [data-parent=c1]{display:inline}
#a:checked ~ #c:checked ~ #c2:checked ~ * [data-parent=c2]{display:inline}
</style>
<input type="checkbox" id="a" class="hide">
<input type="checkbox" id="b" class="hide">
<input type="checkbox" id="c" class="hide">
<input type="checkbox" id="b1" class="hide">
<input type="checkbox" id="b2" class="hide">
<input type="checkbox" id="c1" class="hide">
<input type="checkbox" id="c2" class="hide">
<div>
<label for="a">a</label>
<label for="b" data-parent="a">b</label>
<label for="b1" data-parent="b">b1</label>
<span data-parent="b1">b11</span>
<span data-parent="b1">b12</span>
<span data-parent="b1">b13</span>
<label for="b2" data-parent="b">b2</label>
<span data-parent="b2">b21</span>
<span data-parent="b2">b22</span>
<span data-parent="b2">b23</span>
<label for="c" data-parent="a">c</label>
<label for="c1" data-parent="c">c1</label>
<span data-parent="c1">c11</span>
<span data-parent="c1">c12</span>
<span data-parent="c1">c13</span>
<label for="c2" data-parent="c">c2</label>
<span data-parent="c2">c21</span>
<span data-parent="c2">c22</span>
<span data-parent="c2">c23</span>
</div>
ありがとうございます！トライしてみます。
あなたの回答
tips
プレビュー
