回答編集履歴

3

修正

2016/10/03 04:34

投稿

yambejp
yambejp

スコア114585

test CHANGED
@@ -4,15 +4,25 @@
4
4
 
5
5
 
6
6
 
7
- # 追記
7
+ # 修正
8
8
 
9
- 一部修正
9
+ ラジオボタン版に修正
10
10
 
11
11
  ```css
12
12
 
13
13
  input.menu{display:none;}
14
14
 
15
- .nav input[type="checkbox"]:checked + table tbody{display:none;}
15
+ .nav input[type="radio"].menu + table tbody{display:none;}
16
+
17
+ .nav input[type="radio"].menu:checked + table tbody{display:table-row-group;}
18
+
19
+ .nav input[type="radio"].menu + table label.hide{display:none;}
20
+
21
+ .nav input[type="radio"].menu + table label.show{display:inline;}
22
+
23
+ .nav input[type="radio"].menu:checked + table label.hide{display:inline;}
24
+
25
+ .nav input[type="radio"].menu:checked + table label.show{display:none;}
16
26
 
17
27
  ```
18
28
 
@@ -28,7 +38,9 @@
28
38
 
29
39
  <td class="nav">
30
40
 
41
+ <input type="radio" name="ch" id="ch0" class="menu" checked>
42
+
31
- <input type=checkbox id="ch1" class="menu">
43
+ <input type="radio" name="ch" id="ch1" class="menu">
32
44
 
33
45
  <table border>
34
46
 
@@ -36,7 +48,7 @@
36
48
 
37
49
  <tr>
38
50
 
39
- <td><label for="ch1">menu1</label></td>
51
+ <td><label for="ch1" class="show">menu1</label><label for="ch0" class="hide">menu1</label></td>
40
52
 
41
53
  </tr>
42
54
 
@@ -62,7 +74,7 @@
62
74
 
63
75
  <td class="nav">
64
76
 
65
- <input type=checkbox id="ch2" class="menu">
77
+ <input type="radio" name="ch" id="ch2" class="menu">
66
78
 
67
79
  <table border>
68
80
 
@@ -70,7 +82,7 @@
70
82
 
71
83
  <tr>
72
84
 
73
- <td><label for="ch2">menu2</label></td>
85
+ <td><label for="ch2" class="show">menu2</label><label for="ch0" class="hide">menu2</label></td>
74
86
 
75
87
  </tr>
76
88
 
@@ -96,7 +108,7 @@
96
108
 
97
109
  <td class="nav">
98
110
 
99
- <input type=checkbox id="ch3" class="menu">
111
+ <input type="radio" name="ch" id="ch3" class="menu">
100
112
 
101
113
  <table border>
102
114
 
@@ -104,7 +116,7 @@
104
116
 
105
117
  <tr>
106
118
 
107
- <td><label for="ch3">menu3</label></td>
119
+ <td><label for="ch3" class="show">menu3</label><label for="ch0" class="hide">menu3</label></td>
108
120
 
109
121
  </tr>
110
122
 
@@ -130,6 +142,8 @@
130
142
 
131
143
  </table>
132
144
 
145
+ ```
133
146
 
134
147
 
135
- ```
148
+
149
+

2

修正

2016/10/03 04:34

投稿

yambejp
yambejp

スコア114585

test CHANGED
@@ -6,13 +6,13 @@
6
6
 
7
7
  # 追記
8
8
 
9
-
9
+ ※一部修正
10
10
 
11
11
  ```css
12
12
 
13
13
  input.menu{display:none;}
14
14
 
15
- .nav input[type="checkbox"]:checked + table tr:nth-child(n+2){display:none;}
15
+ .nav input[type="checkbox"]:checked + table tbody{display:none;}
16
16
 
17
17
  ```
18
18
 
@@ -20,44 +20,116 @@
20
20
 
21
21
  ```HTML
22
22
 
23
+ <table border>
24
+
23
- <table>
25
+ <tbody>
24
26
 
25
27
  <tr>
26
28
 
27
29
  <td class="nav">
28
30
 
29
- <a href="#">メニュー</a>
30
-
31
31
  <input type=checkbox id="ch1" class="menu">
32
32
 
33
+ <table border>
34
+
33
- <table>
35
+ <thead>
34
36
 
35
37
  <tr>
36
38
 
37
- <td><label for="ch1">access</label></td>
39
+ <td><label for="ch1">menu1</label></td>
40
+
41
+ </tr>
42
+
43
+ </thead>
44
+
45
+ <tbody>
46
+
47
+ <tr><td>data1</td></tr>
48
+
49
+ <tr><td>data2</td></tr>
50
+
51
+ <tr><td>data3</td></tr>
52
+
53
+ </tbody>
54
+
55
+ </table>
56
+
57
+ </td>
38
58
 
39
59
  </tr>
40
60
 
41
61
  <tr>
42
62
 
63
+ <td class="nav">
64
+
65
+ <input type=checkbox id="ch2" class="menu">
66
+
67
+ <table border>
68
+
69
+ <thead>
70
+
71
+ <tr>
72
+
73
+ <td><label for="ch2">menu2</label></td>
74
+
75
+ </tr>
76
+
77
+ </thead>
78
+
79
+ <tbody>
80
+
43
- <td>data1</td>
81
+ <tr><td>data1</td></tr>
82
+
83
+ <tr><td>data2</td></tr>
84
+
85
+ <tr><td>data3</td></tr>
86
+
87
+ </tbody>
88
+
89
+ </table>
90
+
91
+ </td>
44
92
 
45
93
  </tr>
46
94
 
47
95
  <tr>
48
96
 
49
- <td>data2</td>
97
+ <td class="nav">
98
+
99
+ <input type=checkbox id="ch3" class="menu">
100
+
101
+ <table border>
102
+
103
+ <thead>
104
+
105
+ <tr>
106
+
107
+ <td><label for="ch3">menu3</label></td>
50
108
 
51
109
  </tr>
52
110
 
53
- <tr>
111
+ </thead>
54
112
 
113
+ <tbody>
114
+
115
+ <tr><td>data1</td></tr>
116
+
117
+ <tr><td>data2</td></tr>
118
+
55
- <td>data3</td>
119
+ <tr><td>data3</td></tr>
120
+
121
+ </tbody>
122
+
123
+ </table>
124
+
125
+ </td>
56
126
 
57
127
  </tr>
58
128
 
59
- </table>
129
+ </tbody>
60
130
 
61
131
  </table>
62
132
 
133
+
134
+
63
135
  ```

1

ついき

2016/10/03 02:39

投稿

yambejp
yambejp

スコア114585

test CHANGED
@@ -1,3 +1,63 @@
1
1
  チェックボックスをおかないとできないですね
2
2
 
3
3
  何度か例示しませんでしたっけ?
4
+
5
+
6
+
7
+ # 追記
8
+
9
+
10
+
11
+ ```css
12
+
13
+ input.menu{display:none;}
14
+
15
+ .nav input[type="checkbox"]:checked + table tr:nth-child(n+2){display:none;}
16
+
17
+ ```
18
+
19
+
20
+
21
+ ```HTML
22
+
23
+ <table>
24
+
25
+ <tr>
26
+
27
+ <td class="nav">
28
+
29
+ <a href="#">メニュー</a>
30
+
31
+ <input type=checkbox id="ch1" class="menu">
32
+
33
+ <table>
34
+
35
+ <tr>
36
+
37
+ <td><label for="ch1">access</label></td>
38
+
39
+ </tr>
40
+
41
+ <tr>
42
+
43
+ <td>data1</td>
44
+
45
+ </tr>
46
+
47
+ <tr>
48
+
49
+ <td>data2</td>
50
+
51
+ </tr>
52
+
53
+ <tr>
54
+
55
+ <td>data3</td>
56
+
57
+ </tr>
58
+
59
+ </table>
60
+
61
+ </table>
62
+
63
+ ```