Javascript 使用jQuery管理HTML列表项

我拥有的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>

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

请尝试以下方法：

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

我想符合你所有的规格

---

看

给你，再加上你的方法，这会很有魅力：）

---

如果我没弄错你需要这个

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

});

---

当您使用

$（'ul:gt（1）'）.hide（）时您是否有意显示第一个？这非常有效。我知道这会相对简单。我希望将菜单的展开和折叠移动到单独的方法。我计划在尝试
$（“.menuitems”）.parent（）时使用
expand（）
collapse（）
explore（）
。单击（函数（）{expand（）；}）
和
函数expand（）{$（this）.find（.menuitems”）.toggle（）；}
它不再工作。这怎么可能呢？好吧，
$（this）
不再引用新函数中有用的内容。我将对象作为参数并调用
expand（$（this））。这就是我最后要做的<代码>函数展开（元素）{$（元素）.children（）.show（）；}
非常感谢您的帮助
    $(".menuitems").parent().click(function () {
        $(this).find("li").toggle();
    });
    $(".menuitems li").click(function () {
        var li_text_trimmed = $.trim($(this).text())
        alert(li_text_trimmed)
    })

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

});