Показать сообщение отдельно
  #1 (permalink)  
Старый 15.12.2012, 21:15
Новичок на форуме
Отправить личное сообщение для Vhornets Посмотреть профиль Найти все сообщения от Vhornets
 
Регистрация: 24.09.2012
Сообщений: 8

Повторное срабатывание события
Уже в который раз сталкиваюсь с подобным, но все стеснялся спросить :
предположим, есть элементарный нумерованый список <ol>. У него есть скрытые классом .hide дети <li>. По клику на заголовке списка дети должны менять свой класс на .show и, соответствнно, отображаться. В общем-то совершенно типичная ситуация, но все дело в том, что класс меняется (дети отображаются) только единожды после проверки обработчиком, а при повторном срабатывании события класс не меняется (дети не скрываются).
window.onload = function() {
	
	var ol = document.getElementById("list");
		if(ol.addEventListener) {
			ol.addEventListener("click", showHide, false);
		}
		else if(ol.attachEvent) {
			ol.attachEvent("onclick", showHide);
		}
	
	function showHide(event) {
		var e = event || window.event;
		var target = e.target || e.srcElement;
		var child = target.childNodes;
		for(var i = 0; i<child.length; i++) {
			if(child[i].className = "hide") {
				child[i].className = "show";
			}
			else {
				child[i].className = "hide";
			}	
		}
	}
	
}

Разметка:
<ol id="list">
Lllist
<li class="hide">List 1</li>
<li class="hide">List 1</li>
<li class="hide">List 1</li>
<li class="hide">List 1</li>
</ol>
Стили (хотя тут все очевидно):
#list {
width:150px;
}
.hide{
display:none;
}
.show {
display:list-item;
}
Ответить с цитированием