0

我有一个下拉菜单，无法在 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;
4

2 回答 2

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;
于 2013-01-29T17:35:30.573 回答
0

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

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

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

和

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

那应该让你开始。

于 2013-01-29T17:45:17.613 回答