JavaScript получить дочерний элемент

Почему это не работает в 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>

EDIT Ответ:

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

Ответ 1

У ULs нет атрибута имени, но вы можете ссылаться на имя ul по тегам.

Попробуйте заменить строку 3 в script следующим образом:

var sub = cat.getElementsByTagName("UL");

Ответ 2

Я предлагаю сделать что-то похожее на:

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 Fiddle demo.

Хотя вышеизложенное полагается на использование атрибута class, а не <<22 > , равного sub.

Что касается того, почему ваша оригинальная версия "не работает" (не, я должен добавить, особенно полезное описание проблемы), все, что я могу предложить, это то, что в Chromium консоль JavaScript сообщила, что:

Uncaught TypeError: Object # не имеет метода getElementsByName.

Один подход к работе над ограничениями семейства более старых IE заключается в использовании пользовательской функции для эмуляции getElementsByClassName(), хотя и грубо:

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 Fiddle demo.

Ответ 3

Попробуйте следующее:

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;
    }
}