折りたためるリスト
折りたためる(というか最初は折りたたまれており、タップしたら展開される)リスト。 iPhone 用のウェブページの練習も兼ねて、最初から組んでみる。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <style type="text/css"> body{ margin: 0; padding: 0; } h1{ font-size: 1.6em; } ul.foldable{ width: 300px; margin: 10px auto 0; padding: 0; border: 1px solid #999; -webkit-border-radius: 10px; list-style: none; } ul.foldable > li{ margin: 0; padding-left: 1em; border-top: 1px solid #999; } ul.foldable > li:first-child{ border-top: none; } ul.foldable > li > ul{ margin: 0; padding: 0; list-style: none; } ul.foldable > li > ul > li{ margin-left: 1ex; padding-left: 1ex; border-top: 1px solid #999; } </style> <script type="text/javascript"> function init(){ init_foldable_lists(); } function init_foldable_lists(){ var uls = document.getElementsByTagName("ul"); for(var i = uls.length-1; i >= 0; i--){ var list = uls[i]; if(list.className == 'foldable'){ // list : ul#foldable for(var j = list.childNodes.length-1; j >= 0; j--){ var item = list.childNodes[j]; if(item.tagName == 'LI'){ // item : ul#foldable > li var hasChild = false; for(var k = item.childNodes.length-1; k >= 0; k--){ var child = item.childNodes[k]; if(child.tagName == 'UL'){ // child : ul#foldable > li > ul child.style.display = 'none'; hasChild = true; } } if(hasChild){ item.onclick = tapOnFoldableList; } } } } } } function tapOnFoldableList(){ for(var i = this.childNodes.length-1; i >= 0; i--){ var child = this.childNodes[i]; if(child.style.display == 'none'){ child.style.display = 'block'; } else{ child.style.display = 'none'; } } } </script> <title>HTML5 サンプル</title> </head> <body onload="init()"> <h1>冬の星座と明るい星たち</h1> <ul class="foldable"> <li>うさぎ座</li> <li>おうし座<ul> <li>アルデバラン</li> </ul></li> <li>おおいぬ座<ul> <li>シリウス</li> </ul></li> <li>オリオン座<ul> <li>リゲル</li> <li>ベテルギウス</li> </ul></li> <li>かに座</li> <li>ぎょしゃ座<ul> <li>カペラ</li> </ul></li> <li>こいぬ座<ul> <li>プロキオン</li> </ul></li> <li>ふたご座<ul> <li>ポルックス</li> </ul></li> </ul> </body> </html>
iPhone 向けのスタイルシートのことなどは iPhone 生活 - iPhone 向けホームページ開発を参考にさせてもらいました。
うーん。