javascript - 带有点击切换的下拉菜单

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

    });
});

演示

Answer 2

检查这个小提琴

http://jsfiddle.net/Kritika/SZwTg/1/

               $(document).ready(function () {
                      $("li").click(function () {
                          $('li > ul').not($(this).children("ul")).hide();
                          $(this).children("ul").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 来隐藏它们。

Answer 3

最好在切换位置使用 slideToggle：

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

});