jQuery 单击切换下拉菜单

Drop down menu with on click toggle

提问by UntitledGraphic

I am attempting to create a drop down menu which activates on click rather than on hover. So far I have the on click working with a little javascript, but whilst the sub menus show well and if another menu is clicked other submenus hide, I can't work out how to hide a sub menu if its parent is clicked.

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

EG in this JS fiddleI can click on "parent 1" to reveal its children and when I click on "parent 2" parent 1's children hide and Parent 2's children show. But if Parent 1's children show I want to be able to hide them by clicking on Parent 1 again, (or even better anywhere outside the children)

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

I have seen examples working where each parent and sub menu is given individual classes or ids. I want to avoid that as it needs to work in a cms.

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

Here's the basic code I have

这是我的基本代码

The HTML:

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>

The javascript:

javascript：

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

CSS is probably not necessary, but its on the fiddle if needed

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

回答by PSL

Try this way.

试试这个方法。

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

演示

回答by Pbk1303

check this fiddle

检查这个小提琴

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

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

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

or

或者

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

on click of "parent 1" it reveals its children and when you click on "parent 2" parent 1's children hide and Parent 2's children show. and if Parent 1's children show you wil be able to hide them by clicking on Parent 1 again.

单击“父 1”时，它会显示其子项，当您单击“父 2”时，父 1 的子项会隐藏，而父项 2 的子项会显示。如果 Parent 1 的孩子显示您将能够通过再次单击 Parent 1 来隐藏它们。

回答by Anup

Better to use slideToggle at the place of toggle:

最好在切换位置使用 slideToggle：

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

});

});