如何避免隐藏不应该隐藏的部分

How to avoid hiding section that shouldn't hide?

本文关键字：隐藏 不应该 何避免      更新时间：2024-02-09

这是我到目前为止所得到的演示。

我试图达到的是隐藏一个信息列表，以便在您单击它时显示。

这一切都包含在一个ul列表中，其中ul子项嵌套在其li元素中，依此类推。

到目前为止，它做了它应该做的事情：当您单击li父级时隐藏或显示ul子项。

但问题是，当我单击已经在li内的ul内的li时，此父ul隐藏。

我怎样才能避免这种情况发生？有没有更好的方法

？

我对js并不陌生，但我仍在学习，我想看看你们，伙计们，可以教我什么。

提前谢谢。

PD：如果不是问太多，我真的很感激一个纯粹的js答案，这样我就可以了解更多(：

您的问题源于事件传播。 在你的小提琴中发生的事情是，当孩子被点击时，事件也会传播给父母并隐藏整个事情。 这就是为什么你可能会注意到，第二次打开父级时，孩子也会打开。 以下是事件在不同浏览器中传播的不同方式的说明的链接。

对于除IE版本<9以外的所有内容。对小提琴的这种修改应该使您的代码正常工作。 唯一的区别是我正在阻止事件从您的孩子 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>
相关文章：