teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

補足

2016/09/13 09:07

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -62,4 +62,63 @@
62
62
  </tr>
63
63
  </tbody>
64
64
  </table>
65
+ ```
66
+
67
+ # 補足
68
+ ※idをきちんとつければ複数でもいけるはず
69
+ (古いIEを除く)
70
+ ```CSS
71
+ .on-off{display:none;}
72
+ input[type="checkbox"].on-off + table>tbody{display:none;}
73
+ input[type="checkbox"].on-off:checked + table>tbody{display:table;}
74
+
75
+ ```
76
+ ```HTML
77
+ <input type="checkbox" id="Panel1" class="on-off">
78
+ <table class="menu" width=100>
79
+ <caption class="class">
80
+ <label for="Panel1">メニューa</label>
81
+ </caption>
82
+ <tbody>
83
+ <tr>
84
+ <th>1</th>
85
+ <td>メニュー1</td>
86
+ </tr>
87
+ <tr>
88
+ <th>2</th>
89
+ <td>メニュー2</td>
90
+ </tr>
91
+ </tbody>
92
+ </table><input type="checkbox" id="Panel2" class="on-off">
93
+ <table class="menu" width=100>
94
+ <caption class="class">
95
+ <label for="Panel2">メニューb</label>
96
+ </caption>
97
+ <tbody>
98
+ <tr>
99
+ <th>1</th>
100
+ <td>メニュー1</td>
101
+ </tr>
102
+ <tr>
103
+ <th>2</th>
104
+ <td>メニュー2</td>
105
+ </tr>
106
+ </tbody>
107
+ </table>
108
+ <input type="checkbox" id="Panel3" class="on-off">
109
+ <table class="menu" width=100>
110
+ <caption class="class">
111
+ <label for="Panel3">メニューc</label>
112
+ </caption>
113
+ <tbody>
114
+ <tr>
115
+ <th>1</th>
116
+ <td>メニュー1</td>
117
+ </tr>
118
+ <tr>
119
+ <th>2</th>
120
+ <td>メニュー2</td>
121
+ </tr>
122
+ </tbody>
123
+ </table>
65
124
  ```

2

追記2

2016/09/13 09:07

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -34,4 +34,32 @@
34
34
  });
35
35
  });
36
36
 
37
+ ```
38
+
39
+ # 追記2
40
+ 確実でなくてよければ以下が近いかも
41
+ セレクタの解釈などブラウザの違いが吸収しきれませんが
42
+ とくにIEなどはbehavior:expression()など使わないとダメかもしれません
43
+ ```css
44
+ .on-off{display:none;}
45
+ input[type="checkbox"].on-off + table>tbody{display:none;}
46
+ input[type="checkbox"].on-off:checked + table>tbody{display:table;}
47
+ ```
48
+ ```HTML
49
+ <input type="checkbox" id="Panel1" class="on-off">
50
+ <table class="menu" width=100>
51
+ <caption class="class">
52
+ <label for="Panel1">メニュー</label>
53
+ </caption>
54
+ <tbody>
55
+ <tr>
56
+ <th>1</th>
57
+ <td>メニュー1</td>
58
+ </tr>
59
+ <tr>
60
+ <th>2</th>
61
+ <td>メニュー2</td>
62
+ </tr>
63
+ </tbody>
64
+ </table>
37
65
  ```

1

追記

2016/09/12 03:11

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -1,3 +1,37 @@
1
1
  jQueryなど絡めてクライアントサイドの
2
2
  処理を入れれば可能だと思いますが
3
- マークアップの原則から考えればやるべきではありません
3
+ マークアップの原則から考えればやるべきではありません
4
+
5
+ # 追記
6
+ ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら
7
+ こんな感じでどうでしょう?
8
+
9
+ ```HTML
10
+ <table width=100>
11
+ <caption class="class">メニュー</caption>
12
+ <tbody>
13
+ <tr>
14
+ <th>1</th>
15
+ <td>メニュー1</td>
16
+ </tr>
17
+ <tr>
18
+ <th>2</th>
19
+ <td>メニュー2</td>
20
+ </tr>
21
+ </tbody>
22
+ </table>
23
+ ```
24
+ - tableの幅を指定しておかないとcaptionがずれる
25
+ - javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために
26
+ theadやtbodyはなるべく明示してください
27
+
28
+ ```javascript
29
+ $(function(){
30
+ $('.class').siblings().css('display','none');
31
+ $('.class').click(function(){
32
+ var disp=$(this).siblings().css('display');
33
+ $(this).siblings().css('display',disp=='none'?'':'none');
34
+ });
35
+ });
36
+
37
+ ```