Ответ 1
У ULs нет атрибута имени, но вы можете ссылаться на имя ul по тегам.
Попробуйте заменить строку 3 в script следующим образом:
var sub = cat.getElementsByTagName("UL");
Почему это не работает в 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>
У ULs нет атрибута имени, но вы можете ссылаться на имя ul по тегам.
Попробуйте заменить строку 3 в script следующим образом:
var sub = cat.getElementsByTagName("UL");
Я предлагаю сделать что-то похожее на:
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);
};
Хотя вышеизложенное полагается на использование атрибута 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);
};
}
Попробуйте следующее:
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;
}
}