古い記事
ランダムジャンプ
新しい記事
条件にあうリストアイテム(li)を非表示にしたり表示したりするための JavaScript による方法をメモ。

一度非表示にしたあとに再表示するとliの頭の点が消えてしまう問題はどうしたもんでしょうかねえ。

  • 条件にあうリストに特定のクラスを設定
  • JavaScript で display:none
  • サンプルページ
  • 困った問題とその対処
    • li の style.display を javascript で none にしてから block にすると頭のポチが消えてしまう。
    • その場しのぎとして、最初から頭の点を無くすことにした。
      • ul の list-style-type を none に

サンプルページのHTMLソース:
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HIDE LIST ITEMS TEST JavaScript</title>
<script>
function foobar(id,cn) {
  if (!document.getElementById) return;
  if (!document.getElementById(id)) return;
  var onoff = !document.getElementById(id).checked;
  show_hide_items(cn, onoff);
}
function show_hide_items (cn,vsbl) {
  if (!document.getElementsByClassName) return;
  if (!document.getElementsByClassName(cn)) return;
  var obj = document.getElementsByClassName(cn);
  for (var idx = 0; idx < obj.length; idx++) {
    if (vsbl) obj[idx].style.display = "block";
    else obj[idx].style.display = "none";
  }
}
</script>
</head>
<body>
<input type="checkbox" name="btn" id="btn" onclick="foobar('btn','nactv')">HIDE LIST ITEMS

<ol><li>

list-style-type:none
<ul style="list-style-type: none; padding: 0;">
<li>1001</li>
<li class="nactv">1002
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li class="nactv">1003</li>
<li>1004</li>
</ul>

</li><li>

default
<ul>
<li>1001</li>
<li class="nactv">1002</li>
<li>1003</li>
<li class="nactv">1004</li>
</ul>

</li></ol>

</body>
</html>