【JavaScript】条件にあうリストアイテム(li)の表示/非表示を切り替える
2016-02-07-2
[Programming][JavaScript]
条件にあうリストアイテム(li)を非表示にしたり表示したりするための JavaScript による方法をメモ。
一度非表示にしたあとに再表示するとliの頭の点が消えてしまう問題はどうしたもんでしょうかねえ。
サンプルページのHTMLソース：
一度非表示にしたあとに再表示すると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>