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

我有一个下拉菜单，我很难在Internet Explorer中工作。它在Chrome和Firefox上运行良好，但在InternetExplorer中没有任何功能。我更喜欢将所有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>

还有javascript，我在一个单独的.js文档中有：

    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;

函数启动（）
{
if（document.getElementsByClassName）
{
var sideMenuOptions=document.getElementsByClassName（'sidemenu-maincat'）；
对于（变量i=0；i

您的代码在IE9和IE10上运行良好。但是，以前的版本不支持

addEventListener

，也不支持

attachEvent

方法。因此，确定调用对象的唯一方法是替换

this

引用（或使用框架）

代码的另一个问题是IE8不支持

GetElementsByCassName（）

。当您的代码对此进行测试时，回退会再次尝试使用它来实例化

子菜单项

。更好的方法是使用，它在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;

Element.prototype.addAnEvent=函数（名称，funct）{
如果（此.addEventListener）{
this.addEventListener（名称、函数、false）；
}else if（此附件）{
var_this=这个；
this.attachEvent（“on”+名称，函数（）{
函数应用（_this）；
//其中funct中“this”的值应指向“element”
});
}
};
函数初始化（）{
var sideMenuOptions=document.querySelectorAll（'.sidemenu maincat'）；
对于（变量i=0；i

大多数开发人员通过使用健壮的polyfill（如JQuery）来应对这一挑战，它可以为您处理这样的跨浏览器兼容性问题。这是非常努力跟上所有的跨浏览器问题自己

如果您感兴趣，可以在源代码中包含JQuery并替换它

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

与

---

这应该可以让您开始了。

按F12打开开发人员工具，然后按“脚本”选项卡上的“开始调试”，然后重新运行代码。有什么错误吗？IE喜欢默默地失败，除非你告诉它你想知道。@Plynx它说“对象不支持此属性或方法”，并从

sideMenuOptions[i]

和脚本的其余部分开始标记。这是什么版本的IE？IE 8及以下版本不支持

addEventListener

。它是IE 8。我如何解决这个问题呢？所以我用

addEventListener

将它放在我的代码行前面？我对javascript非常陌生，我不完全理解所有这些代码。这确实有效，但它总是打开第二个子菜单，即出现的选项总是

subcat2-1 subcat2-2 subcat2-3

对此表示抱歉。元素引用在每个循环迭代中都被替换。我更新了我的答案，通过将元素设置为事件源来解决这个问题。它在IE8+中对我有效。你在开发控制台中有错误吗？哼。。。当我单击实际的div时，我可以为我工作，但当我单击div中的图片时，我就不工作了。我将用我的完整代码来尝试它，看看它是如何工作的。编辑：这是一样的，它的工作时，图片不是点击，但div。我不想使用任何library@Benji没问题！至少现在你知道问题出在哪里了。每次你使用IE不支持的功能时，你都需要分为两种方式。是的。。唯一的问题是，我现在真的很难通过这样做来解决它。@Benji，那是因为它很难！它很挑剔，容易出错，甚至有经验的开发人员也可能遇到问题。这就是为什么我们大多使用具有

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

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