2

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

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

4

3 回答 3

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/

于 2012-11-09T09:47:44.420 回答
0

给你，再加上你的方法，这会很有魅力:)

    $(".menuitems").parent().click(function () {
        $(this).find("li").toggle();
    });
    $(".menuitems li").click(function () {
        var li_text_trimmed = $.trim($(this).text())
        alert(li_text_trimmed)
    })
于 2012-11-09T09:51:27.150 回答
0

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

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

});
于 2012-11-09T09:57:24.960 回答