回答編集履歴

3 補足

yambejp

yambejp score 50766

2016/09/13 18:07  投稿

jQueryなど絡めてクライアントサイドの
処理を入れれば可能だと思いますが
マークアップの原則から考えればやるべきではありません
# 追記
ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら
こんな感じでどうでしょう?
```HTML
<table width=100>
<caption class="class">メニュー</caption>
<tbody>
<tr>
<th>1</th>
<td>メニュー1</td>
</tr>
<tr>
<th>2</th>
<td>メニュー2</td>
</tr>
</tbody>
</table>
```
- tableの幅を指定しておかないとcaptionがずれる
- javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために
theadやtbodyはなるべく明示してください
```javascript
$(function(){
 $('.class').siblings().css('display','none');
 $('.class').click(function(){
   var disp=$(this).siblings().css('display');
   $(this).siblings().css('display',disp=='none'?'':'none');
 });
});
```
# 追記2
確実でなくてよければ以下が近いかも
セレクタの解釈などブラウザの違いが吸収しきれませんが
とくにIEなどはbehavior:expression()など使わないとダメかもしれません
```css
.on-off{display:none;}
input[type="checkbox"].on-off + table>tbody{display:none;}
input[type="checkbox"].on-off:checked + table>tbody{display:table;}
```
```HTML
<input type="checkbox" id="Panel1" class="on-off">
<table class="menu" width=100>
<caption class="class">
<label for="Panel1">メニュー</label>
</caption>
<tbody>
<tr>
<th>1</th>
<td>メニュー1</td>
</tr>
<tr>
<th>2</th>
<td>メニュー2</td>
</tr>
</tbody>
</table>
```  
 
# 補足  
※idをきちんとつければ複数でもいけるはず  
(古いIEを除く)  
```CSS  
.on-off{display:none;}  
input[type="checkbox"].on-off + table>tbody{display:none;}  
input[type="checkbox"].on-off:checked + table>tbody{display:table;}  
 
```  
```HTML  
<input type="checkbox" id="Panel1" class="on-off">  
<table class="menu" width=100>  
<caption class="class">  
<label for="Panel1">メニューa</label>  
</caption>  
<tbody>  
<tr>  
<th>1</th>  
<td>メニュー1</td>  
</tr>  
<tr>  
<th>2</th>  
<td>メニュー2</td>  
</tr>  
</tbody>  
</table><input type="checkbox" id="Panel2" class="on-off">  
<table class="menu" width=100>  
<caption class="class">  
<label for="Panel2">メニューb</label>  
</caption>  
<tbody>  
<tr>  
<th>1</th>  
<td>メニュー1</td>  
</tr>  
<tr>  
<th>2</th>  
<td>メニュー2</td>  
</tr>  
</tbody>  
</table>  
<input type="checkbox" id="Panel3" class="on-off">  
<table class="menu" width=100>  
<caption class="class">  
<label for="Panel3">メニューc</label>  
</caption>  
<tbody>  
<tr>  
<th>1</th>  
<td>メニュー1</td>  
</tr>  
<tr>  
<th>2</th>  
<td>メニュー2</td>  
</tr>  
</tbody>  
</table>  
```
2 追記2

yambejp

yambejp score 50766

2016/09/12 12:11  投稿

jQueryなど絡めてクライアントサイドの
処理を入れれば可能だと思いますが
マークアップの原則から考えればやるべきではありません
# 追記
ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら
こんな感じでどうでしょう?
```HTML
<table width=100>
<caption class="class">メニュー</caption>
<tbody>
<tr>
<th>1</th>
<td>メニュー1</td>
</tr>
<tr>
<th>2</th>
<td>メニュー2</td>
</tr>
</tbody>
</table>
```
- tableの幅を指定しておかないとcaptionがずれる
- javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために
theadやtbodyはなるべく明示してください
```javascript
$(function(){
 $('.class').siblings().css('display','none');
 $('.class').click(function(){
   var disp=$(this).siblings().css('display');
   $(this).siblings().css('display',disp=='none'?'':'none');
 });
});
```  
 
# 追記2  
確実でなくてよければ以下が近いかも  
セレクタの解釈などブラウザの違いが吸収しきれませんが  
とくにIEなどはbehavior:expression()など使わないとダメかもしれません  
```css  
.on-off{display:none;}  
input[type="checkbox"].on-off + table>tbody{display:none;}  
input[type="checkbox"].on-off:checked + table>tbody{display:table;}  
```  
```HTML  
<input type="checkbox" id="Panel1" class="on-off">  
<table class="menu" width=100>  
<caption class="class">  
<label for="Panel1">メニュー</label>  
</caption>  
<tbody>  
<tr>  
<th>1</th>  
<td>メニュー1</td>  
</tr>  
<tr>  
<th>2</th>  
<td>メニュー2</td>  
</tr>  
</tbody>  
</table>  
```
1 追記

yambejp

yambejp score 50766

2016/09/12 11:40  投稿

jQueryなど絡めてクライアントサイドの
処理を入れれば可能だと思いますが
マークアップの原則から考えればやるべきではありません
マークアップの原則から考えればやるべきではありません
# 追記
ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら
こんな感じでどうでしょう?
```HTML
<table width=100>
<caption class="class">メニュー</caption>
<tbody>
<tr>
<th>1</th>
<td>メニュー1</td>
</tr>
<tr>
<th>2</th>
<td>メニュー2</td>
</tr>
</tbody>
</table>
```
- tableの幅を指定しておかないとcaptionがずれる
- javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために
theadやtbodyはなるべく明示してください
```javascript
$(function(){
 $('.class').siblings().css('display','none');
 $('.class').click(function(){
   var disp=$(this).siblings().css('display');
   $(this).siblings().css('display',disp=='none'?'':'none');
 });
});
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る