Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Событие по нажатию показывает скрывшиеся блоки, как добавить еще смену стиля (https://javascript.ru/forum/dom-window/54472-sobytie-po-nazhatiyu-pokazyvaet-skryvshiesya-bloki-kak-dobavit-eshhe-smenu-stilya.html)

nik_rzn 18.03.2015 20:29

Событие по нажатию показывает скрывшиеся блоки, как добавить еще смену стиля
 
Есть две функции одна показывает, скрывает блоки, другая показывает тег с атрибутом 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 19.03.2015 09:14

Цитата:

Сообщение от nik_rzn
как мне правильно в первую функцию прописать 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 19.03.2015 15:43

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

Цитата:

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

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

nik_rzn 19.03.2015 16:52

<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 20.03.2015 08:42

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

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

nik_rzn 20.03.2015 10:44

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

nik_rzn 20.03.2015 11:05

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

ksa 20.03.2015 12:47

Цитата:

Сообщение от nik_rzn
я так понимаю надо использовать this

Да. :yes:

nik_rzn 29.08.2015 01:10

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, время: 14:07.