| |
|
|
| | Делаю меню. Примерно так:
<ul id=0>
<li id='l98' onclick="click_li(this);">Item1
<ul id='u98'>
<li id='l100' onclick="click_li(this);">Item1 Subitem1</li>
<li id='l101' onclick="click_li(this);">Item1 Subitem2</li>
<li id='l102' onclick="click_li(this);">Item1 Subitem3</li>
</ul>
</li>
<li id='l27' onclick="click_li(this);">Item2
<ul id='u27'>
<li id='l102' onclick="click_li(this);">Item2 Subitem1
<ul id='u102'>
<li id='l104' onclick="click_li(this);">Item2 Subitem1 SubSubItem1</li>
<li id='l105' onclick="click_li(this);">Item2 Subitem1 SubSubItem2
<ul id='u105'>
<li id='l106' onclick="click_li(this);">Item2 Subitem1 SubSubItem2 SubSubSubItem1</li>
</ul>
</li>
<li id='l51' onclick="click_li(this);">Item2 Subitem1 SubSubItem2
<ul id='u51'>
<li id='l113' onclick="click_li(this);">Item2 Subitem1 SubSubItem3 SubSubSubItem1</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
function click_li(elem){
//закрываю все элементы в корневом (id=0) UL
close_all();
alert(elem.parentNode.id);
//перебор всех дочерних "ul"
var childUls = elem.getElementsByTagName("ul");
var childsLen = childUls.length;
for (var i=0; i<childsLen; i++){
if ( childUls[i].parentNode == elem ){
childUls[i].style.display='block';
}
else{
childUls[i].style.display='none';
}
}
//перебор всех дочерних "li"
var childUls = elem.getElementsByTagName("li");
var childsLen = childUls.length;
for (var i=0; i<childsLen; i++){
if ( childUls[i].parentNode.parentNode == elem ){
childUls[i].style.display='block';
}
else{
childUls[i].style.display='none';
}
}
}
|
В общем, получается ерунда. Кликаю на li, функция открывает нужные и скрывает ненужные элементы меню.
Если кликал корневые li, то всё прекрасно.
А если кликнуть какие-нибудь вложенные, то происходит такое: обрабатывается клик для нужного li, все отрабатывает, а затем приходят ещё несколько кликов (по одному на каждое вложение). Т.е. если кликнуть на третьем уровне от корня, то функция будет вызвана 3 раза: для кликнутого, его парента, и парента того парента....
Второй и третий вызовы напрочь портят то, что было сделано первым вызовом функции.
Проще говоря, как будто мышь протыкает насквозь все элементы вплоть до корневого.
Что можно с этим придумать? Как заблокировать onclick для тех элементов, которые являются парентами для фактически кликнутого?
Спасибо. | |
| |
|
|
| |
|
|
| |
для: Хулиган
(07.03.2008 в 18:37)
| | | close_all(); бы еще дали.. что бы не додумывать... | |
| |
|
|
| |
|
|
| |
для: Хулиган
(07.03.2008 в 18:37)
| | | но в любом случае попробуйте
onclick="onclick_li(this);event.cancelBubble = true;"
|
если не ошибаюсь... почитайте про "маршрутизацию событий " | |
| |
|
|
| |
|
|
| |
для: KirillKiev
(07.03.2008 в 18:58)
| | | Во всяком случае после добавления ваш алерт начал вылазить только один раз | |
| |
|
|
| |
|
|
| |
для: KirillKiev
(07.03.2008 в 19:01)
| | | Ага, спасибо! event.cancelBubble = true заблокировал onclick для парентов.
function close_all(){
var rootUl = document.getElementById('0');
var childLis = rootUl.getElementsByTagName("ul");
var childsLen = rootUl.getElementsByTagName("ul").length;
for (var i=0; i<childsLen; i++){
if ( childLis[i].parentNode.id == 0 )
childLis[i].style.display='block';
else
childLis[i].style.display='none';
}
}
|
В cloas_all в принципе всё правильно, по крайней мере все закрывается.
Надо теперь ещё подрихтовать функцию click_li, чтобы все правильно работало. | |
| |
|
|
| |
|
|
| |
для: KirillKiev
(07.03.2008 в 19:01)
| | | Доработал функцию.
<script type="text/javascript" language="javascript">
function click_li(LI){
close_all();
var elem = LI;
do {
var childUls = elem.getElementsByTagName("ul");
var childsLen = childUls.length;
for (var i=0; i<childsLen; i++){
if ( childUls[i].parentNode == elem ){
childUls[i].style.display='block';
}
}
var childLis = elem.getElementsByTagName("li");
var childsLen = childLis.length;
for (var i=0; i<childsLen; i++){
if ( childLis[i].parentNode.parentNode == elem ){
childLis[i].style.display='block';
}
}
elem = elem.parentNode.parentNode;
}while (elem.id);
}
function close_all(){
var rootUl = document.getElementById('0');
var childUls = rootUl.getElementsByTagName("ul");
var childsLen = rootUl.getElementsByTagName("ul").length;
for (var i=0; i<childsLen; i++){
if ( childUls[i].parentNode.id == 0 )
childUls[i].style.display='block';
else
childUls[i].style.display='none';
}
}
window.onload = close_all();
</script>
|
Теперь всё работает.
Спасибо за помошь. | |
| |
|
|
