Вот демо того, что у меня есть до сих пор.
То, что я пытаюсь достичь, состоит в том, чтобы иметь список скрытой информации, которая будет отображаться всякий раз, когда вы нажимаете на нее.
Все это состоит из ul
списка с ul
элементами, вложенными внутри своих элементов li
и так далее.
До сих пор он делает то, что должен: скрывает или показывает дочерний элемент ul
когда вы нажимаете на родителя li
.
Но проблема в том, что когда я нажимаю на li
внутри ul
который уже находится внутри li
, этот родительский ul
скрывает.
Как я могу избежать этого? Есть ли лучший способ сделать это?
Я не такой уж новый для js, но я все еще участвую, и мне хотелось бы узнать, что вы, ребята, можете научить меня.
Заранее спасибо.
PD: Если это не слишком много, чтобы спросить, я бы действительно оценил чистый ответ js, поэтому я могу узнать больше об этом (:
Ваша проблема возникает из распространения событий. То, что происходило в вашей скрипке, было то, что когда ребенок был нажат, событие также распространялось на родителя и скрывало все это. Вот почему вы могли заметить, что во второй раз, когда родительский ли был открыт, ребенок также будет открыт. Вот ссылка на объяснение различных способов распространения событий в разных браузерах.
Для всех, кроме версии IE <9. Эта модификация вашей скрипки должна заставить ваш код работать. Единственное различие заключается в том, что я останавливаю событие от распространения от вашего li li до родителя li, с
event.stopPropagation();
Ознакомьтесь с документацией Mozilla event.stopPropagation для получения дополнительной информации.
<div class="clpsble-area">
<ul onclick="clpsble(event)">
<li class="collapser">Rand Stuff 1
<div class="clpsble-sec hide">
<ul>
<li class="collapser">Rand Stuff 1.1
<div class="clpsble-sec hide">
<ul>
<li>Rand Stuff 1.1.1</li>
<li class="collapser">Rand Stuff 1.1.2
<div class="clpsble-sec hide">
<ul>
<li>Rand Stuff 1.1.2.1</li>
<li>Rand Stuff 1.1.2.2</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Rand Stuff 1.2</li>
</ul>
</div>
</li>
<li>Rand Stuff 2</li>
</ul>
</div>
<script>
function clpsble(e){
for(el in e.target.children)el.style.display=el.style.display==='hidden'?'block:'hidden';
}
</script>