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> |
childOpen Висит на <a> значит парент = li, а у li нет nextSibling (то есть undefined), а undefuned не имеет свойства className.
|
Спасибо за ответ. А разве <ul class="hidden"> не является nextSibling для <li> ? И что можно тогда использовать вместо nextSibling?
|
nextSibling - это следующий "сосед", а не "родитель". Ul для li является родителем.
К родителю - parentNode. |
Что-то не допонимаю :/
Такая конструкция: ...<li><a class="child" onClick="func(this);"></a></li><ul class="hidden">... в функции я обращаюсь к родителю <a>, родитель для него - это <li>, а сосед для <li> - <ul class="hidden">, все правильно? |
ul
li a/a /li /ul |
У тебя есть фаербаг?
|
Да, файрбаг установлен, но он никаких ошибок не выявляет, в опере и фф все ровно.
|
Для первого LI параметр elem.nextSibling в FF равен UL, а в IE равен LI. Поэтому IE выставляет стиль не тому элементу, который мне нужен. Только как правильно тогда обратится к нужному мне <ul class="hidden"> я не могу понять ?
|
откройфаербаг и найди любой УЛ.
Кликни на нём, чтобы он открылся. Всё что внутри - дети. Если кликнуть на нём ещё раз он закроется. И ЛИ (так как они - дети) ты не увидишь. Так вот при закрытом состоянии то, что ты видишь рядом с УЛ - это nextSibling. То есть другие УЛ, и ли ешё тэги. Далее ищи, для данного ула родителя и закрывай его. Все ДЕТИ (включая этот УЛ) скроются. Так вот скрывшиеся дети одного уровня и есть "соседи" твоему УЛ. |
Часовой пояс GMT +3, время: 11:15. |