37

Firefox でこれが機能しない理由 カテゴリを選択してから、サブカテゴリを表示しようとしました。

<script type="text/javascript">
    function show_sub(cat) {
      var cat = document.getElementById("cat");
      var sub = cat.getElementsByName("sub");
      sub[0].style.display='inline'; 
}

</script>

-

<ul>
    <li id="cat" onclick="show_sub(this)">
        Top 1
        <ul style="display:none" name="sub">
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3</li>
        </ul>
    </li>
    <li>Top 2</li>
    <li>Top 3</li>
    <li>Top 4</li>
</ul>

編集の答えは次のとおりです。

<script type="text/javascript">
   function show_sub(cat) {
      cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";
   }
</script>
4

3 に答える 3

47

UL には name 属性がありませんが、タグ名で ul を参照できます。

スクリプトの 3 行目を次のように置き換えてみてください。

var sub = cat.getElementsByTagName("UL");
于 2012-05-12T22:56:12.707 に答える
3

次のようなことをお勧めします。

function show_sub(cat) {
    if (!cat) {
        return false;
    }
    else if (document.getElementById(cat)) {
        var parent = document.getElementById(cat),
            sub = parent.getElementsByClassName('sub');
        if (sub[0].style.display == 'inline'){
            sub[0].style.display = 'none';
        }
        else {
            sub[0].style.display = 'inline';
        }
    }
}

document.getElementById('cat').onclick = function(){
    show_sub(this.id);
};​​​​

JS フィドルのデモ。

上記は、属性 equal toclassではなく、 aの使用に依存していますが。namesub

元のバージョンが「機能しなかった」理由について (問題の特に有用な説明を追加する必要はありません)、私が提案できるのは、Chromium で JavaScript コンソールが次のように報告したことだけです。

キャッチされていない TypeError: オブジェクト # にはメソッド 'getElementsByName' がありません。

getElementsByClassName()古い IE ファミリの制限を回避する 1 つの方法は、大雑把ではありますが、カスタム関数を使用して をエミュレートすることです。

function eBCN(elem,classN){
    if (!elem || !classN){
        return false;
    }
    else {
        var children = elem.childNodes;
        for (var i=0,len=children.length;i<len;i++){
            if (children[i].nodeType == 1
                &&
                children[i].className == classN){
                    var sub = children[i];
            }
        }
        return sub;
    }
}

function show_sub(cat) {
    if (!cat) {
        return false;
    }
    else if (document.getElementById(cat)) {
        var parent = document.getElementById(cat),
            sub = eBCN(parent,'sub');
        if (sub.style.display == 'inline'){
            sub.style.display = 'none';
        }
        else {
            sub.style.display = 'inline';
        }
    }
}

var D = document,
    listElems = D.getElementsByTagName('li');
for (var i=0,len=listElems.length;i<len;i++){
    listElems[i].onclick = function(){
        show_sub(this.id);
    };
}​

JS フィドルのデモ。

于 2012-05-12T22:17:22.850 に答える
0

これを試してください：

function show_sub(cat) {
    var parent = cat,
    sub = parent.getElementsByClassName('sub');
    if (sub[0].style.display == 'inline'){
        sub[0].style.display = 'none';
    }
    else {
        sub[0].style.display = 'inline';
    }
}

document.getElementById('cat').onclick = function(){
    show_sub(this);
};​

これをIE6および7に使用します

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
               ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}
于 2012-05-12T22:21:48.020 に答える