Событие по нажатию показывает скрывшиеся блоки, как добавить еще смену стиля

[nik_rzn]

Есть две функции одна показывает, скрывает блоки, другая показывает тег с атрибутом 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', т.е хотелось бы при нажатии не только показывался скрывшийся блок, но и изменять стиль .....

[ksa]

как мне правильно в первую функцию прописать 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;
		};
	};
};

Но изменения отображения лучше таки делать через ЦСС. Класс можно присвоить какой-то элементу... Потом убрать если нужно...

[nik_rzn]

Спасибо большое ваш код работает, но атрибут возвращается тегу <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...>

[ksa]

но атрибут возвращается тегу <ul>, при этом не убираются при повторном нажатии

Делай нормальный тестовый пример, а не огрызки. На примере можно показать варианты решения...

[nik_rzn]

<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> если нажатие по первой ссылке....
Надеюсь выразился понятно.... заранее благодарен за помощь... могу отблагодарить не бесплатно...

[ksa]

nik_rzn, нужно в функцию show_hide_menu() передать ссылку на сам элемент... Потом ему менять стиль...

Но лучше работать с классом. Стиль класса оформить через ЦСС...

[nik_rzn]

Спасибо большое, может пример...есть под рукой ? )

[nik_rzn]

я так понимаю надо использовать this

[ksa]

я так понимаю надо использовать this

Да.

[nik_rzn]

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;
};
};
};