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）
再次点击顶级时，子项需要消失（可能使用切换（）？）
点击子项时，需要提醒其名称

我设法让这些子列表最初不显示：

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

Answer 2

在这里，再加上你的方法，这将是一个魅力：）

    $(".menuitems").parent().click(function () {
        $(this).find("li").toggle();
    });
    $(".menuitems li").click(function () {
        var li_text_trimmed = $.trim($(this).text())
        alert(li_text_trimmed)
    })

Answer 3

如果我没弄错，你需要这个，

$(document).ready(function () { 
   $(".menuitems").hide(); // hide all sub lists
   $(".menuitems").first().show(); show first one

   //handle click event    
   $(".menuitems").parent().click(function () {
      $(this).find(".menuitems").toggle(); // toogle sub menu every click
   });

});

使用jQuery管理HTML列表项

3 个答案: