Событие по нажатию показывает скрывшиеся блоки, как добавить еще смену стиля
Есть две функции одна показывает, скрывает блоки, другая показывает тег с атрибутом id равным active равным текущему урулу
function show_hide_menu(id) { if (obj = document.getElementById(id)) { obj.style.display == 'none' ? obj.style.display = 'block' : obj.style.display = 'none'; return false; } return true; } function active(){ var obj = document.getElementById('active'); while (obj){ obj = obj.parentNode; if(obj.tagName=='UL'){ obj.style.display='block'; act = obj.parentNode; } } } Подскажите пожалуйста, как мне правильно в первую функцию прописать style.color="#fff" и style.border='none', т.е хотелось бы при нажатии не только показывался скрывшийся блок, но и изменять стиль ..... |
Цитата:
function show_hide_menu(id){ if (obj = document.getElementById(id)){ if (obj.style.display == 'none'){ obj.style.display = 'block' ; obj.style.color="#fff"; obj.style.border='none'; } else { obj.style.display = 'none'; }; return false; }; return true; }; function active(){ var obj = document.getElementById('active'); while (obj){ obj = obj.parentNode; if(obj.tagName=='UL'){ obj.style.display='block'; act = obj.parentNode; }; }; }; Но изменения отображения лучше таки делать через ЦСС. Класс можно присвоить какой-то элементу... Потом убрать если нужно... |
Спасибо большое ваш код работает, но атрибут возвращается тегу <ul>, при этом не убираются при повторном нажатии, и я похоже не правильно выразился, так как атрибут стиля добавляется не тому тегу по которому идет нажатие....
<li><a title="{name}" onClick="return show_hide_menu('{@id}')" href="{/shop/path}{fullpath}" style="{$link_style}"></li> По нажатию появляется <ul id="{@id}" style="display: none;" class="left_menu_2">и ему же добавляются стили obj.style.color="#fff"; obj.style.border='none'; при этом при повторном нажатии не убираются, и я хотел добавить стили к ссылке.... т.е <a...> |
Цитата:
|
<ul class="left_menu"> <li> <a title='Верстаки серии "CLASSIC"' onClick="return show_hide_menu('614')" href="/shop/verstaki/">Верстаки серии "CLASSIC"</a> <ul id="614" style="display: none;" class="left_menu_2"> <li><a title="Верстаки беcтумбовые" onClick="return show_hide_menu('626');" href="/shop/verstaki/group_602/">Верстаки беcтумбовые</a></li> <li><a title="Верстаки однотумбовые" onClick="return show_hide_menu('624');" href="/shop/verstaki/group_603/">Верстаки однотумбовые</a></li> <li id="active"><a title="Верстаки двухтумбовые" onClick="return show_hide_menu('615')" href="/shop/verstaki/group_615/" style="color:#888181; border-bottom: none;">Верстаки двухтумбовые</a></li> </ul> </li> <li> <a title="Комплектующие" onClick="return show_hide_menu('627');" href="/shop/group_627/">Комплектующие</a> <ul id="627" style="display: none;" class="left_menu_2"> <li><a title="Тумбы верстачные" onClick="return show_hide_menu('631');" href="/shop/group_627/group_631/">Тумбы верстачные</a></li> <li><a title="Столешницы для верстаков" onClick="return show_hide_menu('632');" href="/shop/group_627/group_632/">Столешницы для верстаков</a></li> <li><a title="Опции" onClick="return show_hide_menu('658');" href="/shop/group_627/group_658/">Опции</a></li> <li><a title="Передвижные верстаки" onClick="return show_hide_menu('634');" href="/shop/group_627/group_634/">Передвижные верстаки</a></li> </ul> </li> <li> <a title="Тележки инструментальные" onClick="return show_hide_menu('628');" href="/shop/group_628/">Тележки инструментальные</a> <ul id="628" style="display: none;" class="left_menu_2"> <li><a title="Серия 006 и 100R" onClick="return show_hide_menu('666');" href="/shop/group_628/group_666/">Серия 006 и 100R</a></li> <li><a title="Серия 200" onClick="return show_hide_menu('667');" href="/shop/group_628/group_667/">Серия 200</a></li> <li><a title="Дополнительные опции" onClick="return show_hide_menu('668');" href="/shop/group_628/group_668/">Дополнительные опции</a></li> </ul> </li> <li> <a title="Металлические шкафы" onClick="return show_hide_menu('629');" href="/shop/group_629/">Металлические шкафы</a> <ul id="629" style="display: none;" class="left_menu_2"> <li><a title="Навесные" onClick="return show_hide_menu('645');" href="/shop/group_629/group_645/">Навесные</a></li> <li><a title="Серия-100" onClick="return show_hide_menu('646');" href="/shop/group_629/group_646/">Серия-100</a></li> <li><a title="Серии-300" onClick="return show_hide_menu('659');" href="/shop/group_629/group_659/">Серии-300</a></li> <li><a title="Серия-400" onClick="return show_hide_menu('665');" href="/shop/group_629/group_665/">Серия-400</a></li> <li><a title="Скамейки вешалки" onClick="return show_hide_menu('650');" href="/shop/group_629/group_650/">Скамейки вешалки</a></li> </ul> </li> </ul> Код моего меню, т.е по нажатию на ссылку хотел что бы стиль добавлялся для ссылки, когда так function show_hide_menu(id){ if (obj = document.getElementById(id)){ if (obj.style.display == 'none'){ obj.style.display = 'block' ; obj.style.color="#fff"; obj.style.border='none'; } else { obj.style.display = 'none'; }; return false; }; return true; }; function active(){ var obj = document.getElementById('active'); while (obj){ obj = obj.parentNode; if(obj.tagName=='UL'){ obj.style.display='block'; act = obj.parentNode; }; }; }; то стиль добовляется в <ul id="614" style="display: none; color="#fff"; border='none';" class="left_menu_2">и не убирается при повторном нажатии..., а хотел добавить его к <a title='Верстаки серии "CLASSIC"' onClick="return show_hide_menu('614')" href="/shop/verstaki/">Верстаки серии "CLASSIC"</a> если нажатие по первой ссылке.... Надеюсь выразился понятно.... заранее благодарен за помощь... могу отблагодарить не бесплатно... |
nik_rzn, нужно в функцию show_hide_menu() передать ссылку на сам элемент... Потом ему менять стиль...
Но лучше работать с классом. Стиль класса оформить через ЦСС... |
Спасибо большое, может пример...есть под рукой ? )
|
я так понимаю надо использовать this
|
Цитата:
|
this так и не понял как использовать сделал так спустя годы )))
function show_hide_menu(id){
if (obj = document.getElementById(id)){ if (obj.style.display == 'none'){ obj.style.display = 'block' ; obj.getElementsByTagName('LI')[0].parentNode.parentNode.style.background = 'none' ; } else { obj.style.display = 'none'; obj.getElementsByTagName('LI')[0].parentNode.parentNode.style.background = 'url(/images/site24/marker1.gif)no-repeat 0 7px' ; }; return false; }; return true; }; function active(){ var obj = document.getElementById('active'); while (obj){ obj = obj.parentNode; if(obj.tagName=='UL'){ obj.style.display='block'; act = obj.parentNode; }; }; }; |
Лучше поздно, чем никогда.
|
Цитата:
|
Часовой пояс GMT +3, время: 17:07. |