单击切换下拉菜单

Question

我正在尝试创建一个下拉菜单,该菜单会在点击时激活,而不是在悬停时激活.到目前为止,我点击了使用一个小的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可能不是必需的,但如果需要它可以在小提琴上

Answer 1

试试这种方式.

$(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();

    });
});

演示