单击切换下拉菜单

我正在尝试创建一个下拉菜单，该菜单在单击而不是悬停时激活。到目前为止，我已经使用一点 JavaScript 进行了单击操作，但是虽然子菜单显示得很好，并且如果单击另一个菜单，则其他子菜单会隐藏，但如果单击其父菜单，我无法弄清楚如何隐藏子菜单。

EG 在这JS小提琴我可以单击“父级 1”来显示其子级，当我单击“父级 2”时，父级 1 的子级隐藏，父级 2 的子级显示。但是，如果“父级 1”的子级显示，我希望能够通过再次单击“父级 1”来隐藏它们（或者在子级之外的任何地方更好）

我见过一些例子，其中每个父菜单和子菜单都被赋予单独的类或 ID。我想避免这种情况，因为它需要在 cms 中工作。

这是我的基本代码

HTML：

<div>
<ul>
    <li><a href="#">Parent 1</a>
        <ul>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 2</a>
        <ul>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 3</a>
        <ul>
            <li><a href="#">Parent 3 &raquo; Child 3</a></li>
            <li><a href="#">Parent 3 &raquo; Child 3</a></li>
            <li><a href="#">Parent 3 &raquo; Child 3</a></li>
        </ul>
    </li>
</ul>

JavaScript：

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').hide();
        $(this).children("ul").toggle();
    });
});

CSS 可能不是必需的，但如果需要的话它就在小提琴上

试试这个方法。

$(document).ready(function () {
    $("li").click(function () {
        //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul").toggle()).hide();

    });
});

Demo