Javascript下拉菜單在Internet Explorer中不起作用

Question

我有一個下拉菜單，無法在Internet Explorer中使用。 它在Chrome和Firefox上運行正常，但在Internet Explorer中卻無能為力。 而且我更喜歡將所有JavaScript都保存在單獨的文檔javascript.js中，而且我不想使用庫。 我正在使用的HTML代碼是這樣的：

<div id="sidemeny-container">
<div class="sidemenu-maincat">
    <img src="cat1.jpg" alt="cat1" />
        <div class="sidemenu-subcat hidden">
        <a href="subcat1.html"> - Subcat 1 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat2.html"> - Subcat 2 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat3.html"> - Subcat 3 </a>
        </div>  
    </div>

    <div class="sidemenu-maincat">
    <img src="cat2.jpg" alt="cat2" />
        <div class="sidemenu-subcat hidden">
        <a href="subcat2-1.html"> - Subcat 2-1 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat2-2.html"> - Subcat 2-2 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat2-3.html"> - Subcat 2-3 </a>
        </div>  
    </div>
        </div>

和CSS代碼：

#sidemeny-container {
    border-bottom:1px #000 solid; 
    height: auto;
    width: 153px;
    float:left;
    padding: 10px 0px 0px 0px;

}

.sidemenu-maincat {
    border-top: 1px #000 solid;
    border-right: 1px #000000 solid;
    width:148px;
    height:auto;
    float:left;
    padding: 0px 0px 0px 5px;
}

.sidemenu-subcat.hidden {
    display:none;
    width:148px;
    height:auto;
    float:left;
    padding: 0px 0px 0px 15px;
}

還有我在單獨的.js文檔中擁有的javascript：

    function initiate()
    {

  if (document.getElementsByClassName)
    {
        var sideMenuOptions = document.getElementsByClassName('sidemenu-maincat');
        for (var i = 0; i < sideMenuOptions.length; i++) {
            sideMenuOptions[i].addEventListener('click', function () {
                var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
                for (var s = 0; s < subMenuItems.length; s++) {
                    var subItem = subMenuItems[s];
                    if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
                        subItem.className = 'sidemenu-subcat';
                    } else {
                        subItem.className = subItem.className + ' hidden';
                    }
                }
            });
        }
    }
    else
    {
        var sideMenuOptions = document.getElementsByTagName('div');
        for (var i = 0; i < sideMenuOptions.length; i++) {
            if (sideMenuOptions[i].className == 'sidemenu-maincat')
            {
                sideMenuOptions[i].addEventListener('click', function () {
                    var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
                    for (var s = 0; s < subMenuItems.length; s++) {
                        var subItem = subMenuItems[s];
                        if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
                            subItem.className = 'sidemenu-subcat';
                        } else {
                            subItem.className = subItem.className + ' hidden';
                        }
                    }
                });
            }
        }
    }
    }

    window.onload = initiate;

Answer 1

您的代碼可以在IE9和IE10上正常工作。 但是，以前的版本不支持addEventListener ，並且attachEvent方法不提供currentTarget屬性 。 因此，確定調用對象的唯一方法是通過原型設計 （或使用框架）替換this引用。

您的代碼的另一個問題是IE8不支持getElementsByClassName() 。 當您的代碼對此進行測試時，后備嘗試再次使用它實例化subMenuItems 。 更好的方法是使用Document.querySelectorAll ，它可以在IE8及更高版本中使用，並且可以避免重復的代碼。

完整的例子：

Element.prototype.addAnEvent = function(name, funct) {
    if (this.addEventListener) {
        this.addEventListener(name, funct, false);
    } else if (this.attachEvent) {
        var _this = this;
        this.attachEvent("on" + name, function() {
            funct.apply(_this);
            // where the value of "this" in funct should point to "element"
        });
    }
};

function initiate() {
    var sideMenuOptions = document.querySelectorAll('.sidemenu-maincat');
    for (var i = 0; i < sideMenuOptions.length; i++) {
        sideMenuOptions[i].addAnEvent('click', function() {
            openSubmenu(this);
        });
    }
}

function openSubmenu(element) {
    var subMenuItems = element.querySelectorAll('.sidemenu-subcat');
    for (var s = 0; s < subMenuItems.length; s++) {
        var subItem = subMenuItems[s];
        if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
            subItem.className = 'sidemenu-subcat';
        } else {
             subItem.className = subItem.className + ' hidden';
        }
    }
}

window.onload = initiate;

Answer 2

大多數開發人員通過使用健壯的polyfill（例如JQuery）來解決此難題，該容器可以為您解決此類跨瀏覽器的兼容性問題。 自己努力跟上所有跨瀏覽器問題！

如果您有興趣，可以在源代碼中包含JQuery並替換

sideMenuOptions[i].addEventListener('click', function () { 

與

$(sideMenuOptions[i]).on("click", function() { 

那應該讓您開始。