Всем доброго времени суток!
Недавно пришлось столкнуться с 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>
