折りたためるリスト - 見上げれば、空

折りたためる（というか最初は折りたたまれており、タップしたら展開される）リスト。 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 向けホームページ開発を参考にさせてもらいました。

うーん。