0

我正在寻找某种 jQuery 单击菜单，ul如果单击的li元素有子元素，它将打开另一个菜单 - 像这样。

<ul>
    <li><a href"#">Item 1</a>
        <ul>
            <li><a href"page1.html">Item 1 child 1</a></li>
            <li><a href"page2.html">Item 1 child 2</a></li>
            <li>
                <a href"#">Item 1 child 3</a>
                <ul>
                    <li><a href"#">Item 1 child 3 child</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href"page3.html">Item 2</a></li>
    <li><a href"page4.html">Item 3</a></li>
</ul>

因此，当我单击“Item 1”时，它将打开新列表，如果单击“Item 1 child 3”，它将打开另一个列表，依此类推。

我想我曾经看过一些，.next但我不太确定。

4

3 回答 3

1

这应该做你需要的：

$("a").click(function(e){
   $(this).closest("li").children("ul").toggle();
});​

$("a").click();//quick hack to hide all children to start with (if desired)

有关工作示例，请参见此处

这是一个具有滑动效果的示例（如评论中所示）

笔记

使用该.children功能将意味着一旦父级重新扩展，所有“子扩展”都将被“保留” - 对我来说，这似乎是自然行为。

如果您希望关闭父级重置所有子扩展以在下次扩展父级时也关闭，那么您可以使用该.find方法替换.children

此外，应该考虑到此代码将适用于页面上的所有 A 链接，如果您需要更具体地了解此适用于您的 A 链接应该更改选择器。一个仅在 UL 元素中包含 A 链接的示例可能如下所示：

$("ul a").click(...
于 2012-04-27T10:36:19.537 回答
0

使用 jQuery 手风琴插件将是满足您要求的理想方法。关于如何实现它的更多细节，可以在这里找到 jQuery Accordion

于 2012-04-27T10:37:41.737 回答
0

不是完整的实现，但这应该有助于我猜：

$("list").click(function(){
  $(this).find("ul").show();
});

也就是说，您可以使用“find()”来获取子元素。

编辑：如果您想要第一次出现，请使用“first()”api。

参考：http ://api.jquery.com/first/

于 2012-04-27T10:39:14.560 回答