Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   nextSibling в IE (https://javascript.ru/forum/events/1806-nextsibling-v-ie.html)

Andrew 19.09.2008 00:12

nextSibling в IE
 
Всем доброго времени суток!

Недавно пришлось столкнуться с DOM, нужно было написать менюшку подобного типа:
[url="http://imageshost.ru/links/f42a2e7100735484907afd5b77d2d4ff"[/URL]

Почти получилось, но почему то IE не хочет кушать nextSibling, если я указываю parentNode для элемента. В ошибке выдает "Object required". При этом в FF и Opera все работает прекрасно, а в IE косяки. Помогите разобраться в чем дело, или хотя бы подскажите в какую сторону копать.

Заранее спасибо!

p.s. если добавляю знаки табуляции между элементами, то перестает работать во всех браузерах, я так понимаю проблема в том, что скрипт не видет соседних элементов, или принимает за таковые знаки табуляции, можно ли это как от обойти, чтобы можно было использовать табуляцию и скрипт работал?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
BODY, HTML {margin: 0; padding: 0; background:#FFF url(i/topbg.jpg) repeat-x top left; color:#4a4a4a; font-family:Tahoma, Verdana; font-size:12px;}
#sectionsMenu {line-height:1.2;}
#sectionsMenu .show .childOpen {background:url(i/sectmenu_open.gif) no-repeat 0 28%;}
#sectionsMenu .eldersActive {background:url(i/sectmenu_activepar.gif) no-repeat;}
#sectionsMenu .show A {background:url(i/sectmenu_close.gif) no-repeat 0 28%;}
#sectionsMenu .show {display:block;}
#sectionsMenu A {color:#4a4a4a; font-size:12px; font-weight:bold; text-decoration:none; padding:7px 10px 9px 20px; position:relative; display:block;}
#sectionsMenu UL {padding:0 0 1px; margin:0;}
#sectionsMenu UL UL {margin:1px 0 0; font-weight:normal; display:none;}
#sectionsMenu LI {background:url(i/sectmenu_sep.gif) no-repeat; list-style:none; height:30px; padding:4px 0 1px;}
#sectionsMenu .show LI {padding-left:30px;}
#sectionsMenu .level_2 LI {padding-left:45px;}
#sectionsMenu .level_3 LI {padding-left:60px;}

</style>
<script type="text/javascript">
<!--
function childShowHide(elem, levelNum) {
	if (elem.nextSibling.className=='hidden') {
		elem.nextSibling.className='show';
		elem.firstChild.className='eldersActive';
	} else {
		elem.nextSibling.className='hidden';
		elem.firstChild.className='';
	}
}
function childOpen(elem, levelNum) {
	if (elem.className == 'childOpen') {
		elem.className='';
		elem.parentNode.nextSibling.className='hidden';
	} else {
		elem.className='childOpen';
		elem.parentNode.nextSibling.className='show level_' + levelNum;
	}
}

//-->
</script>

<div id="sectionsMenu">
<ul id="first"><li onclick="javascript:childShowHide(this, 1); return false;"><a href="#">Бойлеры</a></li><ul class="hidden"><li><a onclick="javascript:childOpen(this, 2); return false;" href="#">DeDietrich</a></li><ul class="hidden"><li><a onclick="javascript:childOpen(this, 3); return false;" href="">Ёмкостные водонагреватели</a></li><ul class="hidden"><li><a href="#">Ёмкостные водонагреватели типа B</a></li></ul></ul></ul><li><a href="#">Газовые водонагреватели</a></li><li><a href="#">Горелки</a></li><li><a href="#">Запорная и термостатическая арматура</a></li><li onclick="javascript:childShowHide(this, 1); return false;"><a href="#">Котлы</a></li><ul class="hidden"><li><a onclick="javascript:childOpen(this, 2); return false;" href="#">DeDietrich</a></li><ul class="hidden"><li><a onclick="javascript:childOpen(this, 3); return false;" href="#">Котлы атмосферного типа</a></li><ul class="hidden"><li><a href="#">DTG 220</a></li></ul></ul></ul><li onclick="javascript:childShowHide(this, 1); return false;"><a href="#">Радиаторы</a></li><ul class="hidden"><li><a href="#">Kermi (стальные панельные)</a></li></ul><li onclick="javascript:childShowHide(this, 1); return false;"><a href="#">Трубы и фитинги</a></li><ul class="hidden"><li><a href="#">Oventrop</a></li><li><a onclick="javascript:childOpen(this, 2); return false;" href="#">Rehau</a></li><ul class="hidden"><li><a onclick="javascript:childOpen(this, 3); return false;" href="#">Система Raubasic</a></li><ul class="hidden"><li><a href="#">Труба</a></li></ul></ul></ul>
</ul>
</div>
</body>
</html>

ZoNT 19.09.2008 08:28

childOpen Висит на <a> значит парент = li, а у li нет nextSibling (то есть undefined), а undefuned не имеет свойства className.

Andrew 19.09.2008 09:50

Спасибо за ответ. А разве <ul class="hidden"> не является nextSibling для <li> ? И что можно тогда использовать вместо nextSibling?

ZoNT 19.09.2008 11:05

nextSibling - это следующий "сосед", а не "родитель". Ul для li является родителем.
К родителю - parentNode.

Andrew 19.09.2008 11:27

Что-то не допонимаю :/
Такая конструкция:
...<li><a class="child" onClick="func(this);"></a></li><ul class="hidden">...

в функции я обращаюсь к родителю <a>, родитель для него - это <li>, а сосед для <li> - <ul class="hidden">, все правильно?

ZoNT 19.09.2008 11:31

ul
li
a/a
/li
/ul

ZoNT 19.09.2008 11:32

У тебя есть фаербаг?

Andrew 19.09.2008 11:35

Да, файрбаг установлен, но он никаких ошибок не выявляет, в опере и фф все ровно.

Andrew 19.09.2008 11:42

Для первого LI параметр elem.nextSibling в FF равен UL, а в IE равен LI. Поэтому IE выставляет стиль не тому элементу, который мне нужен. Только как правильно тогда обратится к нужному мне <ul class="hidden"> я не могу понять ?

ZoNT 19.09.2008 11:43

откройфаербаг и найди любой УЛ.
Кликни на нём, чтобы он открылся. Всё что внутри - дети. Если кликнуть на нём ещё раз он закроется. И ЛИ (так как они - дети) ты не увидишь. Так вот при закрытом состоянии то, что ты видишь рядом с УЛ - это nextSibling. То есть другие УЛ, и ли ешё тэги. Далее ищи, для данного ула родителя и закрывай его. Все ДЕТИ (включая этот УЛ) скроются. Так вот скрывшиеся дети одного уровня и есть "соседи" твоему УЛ.


Часовой пояс GMT +3, время: 19:31.