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参照を置き換えることです。

コードのもう 1 つの問題は、IE8 が をサポートしていないことgetElementsByClassName()です。コードがこれをテストしている間、フォールバックはそれを再度使用してインスタンス化しようとしますsubMenuItems。IE8 以降で動作し、コードの重複を避けることができるDocument.querySelectorAllを使用することをお勧めします。

完全な例:

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

ほとんどの開発者は、このようなブラウザー間の互換性の問題を処理する JQuery などの堅牢なポリフィルを使用することで、この課題に対応しています。クロスブラウザーの問題をすべて自分で把握しようとしています。

興味がある場合は、ソースに JQuery を含めて置き換えることができます

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

と

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

これで始められるはずです。

于 2013-01-29T17:45:17.613 に答える