【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>