javascript - 使用 jQuery 管理 HTML 列表项

Question

我拥有的 HTML 列表的一部分:

<ul id="listMenu" style="list-style-type:none; margin-left:-50">
    <li> __Menu1
        <ul class="menuitems">
            <li>Item A1</li>
            <li>Item A2</li>
        </ul>
    </li>

    <li> __Menu2
        <ul class="menuitems">
            <li>Item B1</li>
            <li>Item B2</li>
        </ul>
    </li>

    <li> __Menu3
        <ul class="menuitems">
            <li>Item C1</li>
            <li>Item C2</li>
        </ul>
    </li>

    <li> __Menu4
        <ul class="menuitems">
            <li>Item D1</li>
            <li>Item D2</li>
        </ul>
    </li>
</ul>

我的目标是在单独的 js 文件中使用 jQuery 来管理列表。

• 最初，我只需要显示顶级菜单(__Menu1、__Menu2..)。
• 单击顶级菜单时，我想展开并显示子项(项 A1 和 A2)
• 再次点击顶级时，子项需要消失(可能使用 toggle() ？)
• 当一个子项目被点击时，它需要用它的名字来提醒

我设法让子列表最初不显示:

$('ul:gt(1)').hide(); // Hide all submenus initially

但过去我真的不知道如何访问每个列表中的单个项目。我知道这一切可能都很简单，但我只是不知道如何开始，而且我阅读的所有其他信息比我知道的更高级。任何帮助将不胜感激

Answer 1

试试这个:

$(document).ready(function() {
    $(".menuitems").hide();
    $(".menuitems").find("li").click(function(e) {
        $(this).parent().show();
        alert($(this).text());
        e.stopPropagation();
    });
    $(".menuitems").parent().click(function() {
        $(this).find(".menuitems").toggle();
    });
});

我认为符合您的所有规范。

参见 http://jsfiddle.net/BfqhV/2/