Javascript 如何避免隐藏不应该隐藏的部分'；你不会隐藏吗？

这是我到目前为止所拥有的最新资料

我想达到的是有一个隐藏的信息列表，只要你点击它就会显示出来

它都包含一个

ul

列表，其中

ul

子元素嵌套在

li

元素中，依此类推

到目前为止，它所做的是：当您单击

li

父项时，隐藏或显示

ul

子项

但问题是，当我点击

li

中的

ul

时，这个父

ul

会隐藏起来

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

我对js并不陌生，但我还在学习，我想看看你们能教我些什么

提前谢谢

PD：如果没有太多问题，我真的非常感谢一个纯js的答案，这样我可以了解更多（：

兰德一号

兰德Stuff 1.1

兰德公司1.1.1
兰德Stuff 1.1.2

兰德公司1.1.2.1
兰德材料1.1.2.2




兰德1.2


兰德材料2

函数clpsble（e）{
对于（e.target.children中的el）el.style.display=el.style.display=='hidden'？'block:'hidden'；
}

您的问题源于事件传播。在您的小提琴中发生的是，当单击子事件时，事件也传播到父事件并隐藏整个事件。这就是为什么您可能会注意到，第二次打开父事件时，子事件也会被打开。是指向不同w的解释的链接事件在不同的浏览器中传播

除了IE版本之外，其他一切都适用

<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>

event.stopPropagation();