Question

我正在尝试创建一个下拉菜单，该菜单会在点击时激活，而不是在悬停时激活。到目前为止，我点击了一点点javascript，但是子菜单显示得很好，如果点击了其他菜单，其他子菜单隐藏了，如果单击其父菜单，我无法理解如何隐藏子菜单。

EG在这个JS fiddle我可以点击“父母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，但如果需要，可以使用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();

    });
});

<强> Demo

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');
});

}）;

单击切换下拉菜单

3 个答案: