Vhornets
15.12.2012, 21:15
Уже в который раз сталкиваюсь с подобным, но все стеснялся спросить :) :
предположим, есть элементарный нумерованый список <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;
}
предположим, есть элементарный нумерованый список <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;
}