Javascript 带有单击切换的下拉菜单

我正在尝试创建一个下拉菜单，它在单击而不是悬停时激活。到目前为止，我已经使用了一点javascript，但是虽然子菜单显示良好，如果单击了另一个菜单，则其他子菜单隐藏，但是如果单击了其父菜单，我无法确定如何隐藏子菜单

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

例如，在这里我可以点击“父1”来显示它的子项，当我点击“父2”时，父1的子项隐藏，父2的子项显示。但是，如果父1的子项显示，我希望能够通过再次单击父1来隐藏它们（或者在子项之外的任何位置更好）

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

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

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

这是我的基本代码

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

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>

                $(document).ready(function () {
                     $("li").click(function () {
                         var submenu=$(this).children("ul");
                         $('li > ul').not(submenu).hide();
                         submenu.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();

    });
});

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

检查这把小提琴

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

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

或

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

---

单击“父1”将显示其子项，单击“父2”将隐藏父1的子项，并显示父2的子项。如果父项1的子项显示您可以通过再次单击父项1来隐藏它们。

最好在切换位置使用滑动切换：

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

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

---

}))

谢谢PSL，太棒了。这也正是我想要的，不确定哪一个是最好的，希望你不介意我给第一个答案打一个绿色的大勾，它是第一个。

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