MW211 EXIT

devlog
jQuery/ツリー開閉機能
2012年05月20日
HTML側で以下のような感じで、プラス・マイナスアイコン(img)と、
開閉領域(div)を定義してあげる。
┌──────────────────────────────────────┐
│└<img id="T1" src="minus.jpg"/>親<br/><div id="_T1" style="display:block;">│
│  └子<br/></div>                                                           │
└──────────────────────────────────────┘

そして、jQuery側では以下のようにtoggleメソッドを定義してあげればよい。
┌──────────────────────────────────────┐
│$('img').toggle(                                                            │
│     function() {                                                           │
│         $(this).attr('src', 'minus.jpg');                                  │
│         $('#_' + $(this).attr('id')).css('display','block');               │
│     },                                                                     │
│     function() {                                                           │
│         $(this).attr('src', 'plus.jpg');                                   │
│         $('#_' + $(this).attr('id')).css('display','none');                │
│     }                                                                      │
│);                                                                          │
└──────────────────────────────────────┘

ただ、toggleメソッドは頭が固くて初期表示時に開閉が混在していると役に立たない。
ってことで、以下のようにif文で地道にやるのも全然悪くない。
┌──────────────────────────────────────┐
│$('img').click(function() {                                                 │
│    if ($(this).attr('src') == 'plus.jpg') {                                │
│         $(this).attr('src', 'minus.jpg');                                  │
│         $('#_' + $(this).attr('id')).css('display','block');               │
│    } else {                                                                │
│         $(this).attr('src', 'plus.jpg');                                   │
│         $('#_' + $(this).attr('id')).css('display','none');                │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
分類:jQuery