Question

这是我迄今为止所拥有的demo。

我想要达到的目的是隐藏信息列表，以便在您点击它时显示。

这一切都在一个ul列表中，ul个孩子嵌套在li个元素中，等等。

到目前为止它完成了它应该做的事情：当你点击ul父母时隐藏或显示li孩子。

但问题是，当我点击位于li内的ul内的li时，此父级ul会隐藏。

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

我对js并不是那么新，但我还在学习，我想看看你们，伙计们能教给我什么。

提前致谢。

PD ：如果问的不是太多，我真的很感激纯粹的js答案，所以我可以了解更多（（

Answer 1

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

Answer 2

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

除IE版本之外的所有内容＆lt; 9。 This modification to your fiddle应该让您的代码有效。唯一的区别是我阻止事件从你的孩子li传播到父李，用

event.stopPropagation();

查看Mozilla的event.stopPropagation文档以获取更多信息。

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

2 个答案: