javascript - 垂直CSS和Javascript onclick菜单单击子级使其消失

我对Javascript很陌生，对CSS/HTML也很陌生。我试图用CSS和javascript创建一个垂直菜单。当有人单击适当的标题时，子级应该出现在菜单的右侧。
我已经设法让它和第一个次级单位一起工作了。当我单击它的“父级”时，它会出现和消失。但每当我试图单击子级中的标题时，子级将关闭而不是打开下一个子级。我知道我做错了什么，但我不知道是什么：(
我在这里收集了我的代码：http://jsfiddle.net/kyqJ6/但是由于某种原因它在那里不起作用，尽管我直接复制了它。
下面是我的js的一个例子：

function dropdown1()
    {
        if(document.getElementById('menu1').style.display=='block'){
            document.getElementById('menu1').style.display='none';
        }
        else{
            document.getElementById('menu1').style.display='block';
        }
    };

我知道我可能在代码中做了很多愚蠢的事情，有很多事情可以做得更好，请随意指出这些事情，但我可以接受（目前）如果我能得到帮助来解决我的问题：）
感谢您阅读本文，并提前感谢您的考虑/帮助：）

最佳答案

首先，jsfiddle之所以不能工作，不仅仅是因为您加载了脚本。我把它改成了“无包装”而不是“无包装”。
其次，发生这种情况的原因是因为一种叫做propagation的东西。基本上想象一下如果你有两个物体，A和B。

--------------------
|A                 |
|     --------     |
|    |B       |    |
|    |        |    |
|     --------     |
|                  |
--------------------

现在假设这些项中的每个项都有一个click事件clickA()和clickB()。在DOM中，所有事件都在其父对象的链上冒泡。因此，如果你点击A，clickA()将被触发，但是如果你点击BclickB()将被触发，然后是clickA()。因为B是a的子对象，这里是a jsFiddle当每个事件都触发时，它会写入控制台，所以您可以看到我在说什么。因此，您的子级下拉列表会显示出来，但如果再次单击其父级下拉列表标签，则会隐藏所有内容（如果再次单击父级下拉列表，则会看到子级下拉列表确实展开了）。
我在过去写过一篇文章，详细讨论了这个问题，你可能会觉得有帮助。这是视觉效果很好的a blog post。
基本上你有两个选择：
将子级下拉列表作为其父级下拉列表的子元素，而只需定位它们，使它们看起来仍然是子级下拉列表。

--------------------  --------
|A                 | |B       |
|                  | |        |
|                  |  --------
|                  |
|                  |
|                  |
--------------------

或者（建议不要更改太多代码）
有一个名为stopPropagation()的方法可以防止事件冒泡。您可以将此添加到每个单击事件中，以便事件在此停止。这里是将此方法应用于dropdown2()方法的jsFiddle referenced in that post。

关于javascript - 垂直CSS和Javascript onclick菜单单击子级使其消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20709081/