javascript - 单击子组件关闭打开的列表

Question

我已经实现了一个菜单示例，当我单击父菜单链接时，所有子元素在其中可见，当我单击任何子元素时，它会折叠...我在这里做了一个演示 http://codepen.io/anon/pen/KzpKrm ...当我点击子链接时，我只想像这样打开列表并表明已选择此链接...有人请帮忙

  function showmenu(elem) {
        // Clear any currently open menu
        var openMenu = document.getElementById("activeMenu");
        if (openMenu) {
            openMenu.removeAttribute("id");
            // Stop if we're just closing the current menu
            if (openMenu === elem) {
                return;
            }
        }

        // Only apply it if the element actually has LI child nodes.
        // OPTIONAL: Will still work without if statement.
        if (elem.getElementsByTagName("li").length > 0) {
            elem.setAttribute("id", "activeMenu");
        }
    }

Answer 1

您可以将 event.stopPropagation() 添加到嵌套的 ul 中:

<ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
        Service
        <ul onclick="event.stopPropagation()">
            <li><a> Ro </a>    </li>
            <li> <a>List</a> </li>
            <li><a>Service Plan</a> </li>
        </ul>
    </li>
    ....
</ul>