使用JavaScript在HTML中創建下拉復選框列表

Question

我需要創建一個像這里的下拉復選框列表。 那里的代碼存在的問題是，它在IE9中無法正常工作。 我收到一條錯誤消息，指出以下代碼中的getElementsByClassName不是屬性：

var checkList = document.getElementById('list1');
var items = document.getElementById('items');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (items.classList.contains('visible')){
                items.classList.remove('visible');
                items.style.display = "none";
            }

            else{
                items.classList.add('visible');
                items.style.display = "block";
            }


        }

        items.onblur = function(evt) {
            items.classList.remove('visible');
        }

有人可以幫我解決如何創建下拉復選框列表嗎？ 謝謝。

Answer 1

classList屬性不適用於10以下的IE瀏覽器。如果要執行此操作，則必須改用className並檢查該類的索引。 例如：

if (items.className.indexOf('visible') > -1){
            items.className -= 'visible';
            items.style.display = "none";
        }

如果您的商品具有可見的類，它將返回其索引，如果沒有該類，則將返回-1。 我在你這里制造了一個小提琴來演示