Как избежать скрытия раздела, который не должен скрываться?

0

Вот демо того, что у меня есть до сих пор.

То, что я пытаюсь достичь, состоит в том, чтобы иметь список скрытой информации, которая будет отображаться всякий раз, когда вы нажимаете на нее.

Все это состоит из ul списка с ul элементами, вложенными внутри своих элементов li и так далее.

До сих пор он делает то, что должен: скрывает или показывает дочерний элемент ul когда вы нажимаете на родителя li.

Но проблема в том, что когда я нажимаю на li внутри ul который уже находится внутри li, этот родительский ul скрывает.

Как я могу избежать этого? Есть ли лучший способ сделать это?

Я не такой уж новый для js, но я все еще участвую, и мне хотелось бы узнать, что вы, ребята, можете научить меня.

Заранее спасибо.

PD: Если это не слишком много, чтобы спросить, я бы действительно оценил чистый ответ js, поэтому я могу узнать больше об этом (:

Теги:
dom

2 ответа

0
Лучший ответ

Ваша проблема возникает из распространения событий. То, что происходило в вашей скрипке, было то, что когда ребенок был нажат, событие также распространялось на родителя и скрывало все это. Вот почему вы могли заметить, что во второй раз, когда родительский ли был открыт, ребенок также будет открыт. Вот ссылка на объяснение различных способов распространения событий в разных браузерах.

Для всех, кроме версии IE <9. Эта модификация вашей скрипки должна заставить ваш код работать. Единственное различие заключается в том, что я останавливаю событие от распространения от вашего li li до родителя li, с

event.stopPropagation();

Ознакомьтесь с документацией Mozilla event.stopPropagation для получения дополнительной информации.

  • 0
    Спасибо чувак. Это может быть ответом на мои молитвы (:
0
<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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню