Question

我正在寻找某种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>

因此，当我点击“第1项”时，它会打开新列表，如果我点击“第1项子项3”，它将打开另一个列表，因此等等。

我想我曾经看过一些关于.next的内容，但我不太确定。

Answer 1

这应该做你需要的：

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

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

See here for a working example

Here is an example with a sliding effect（正如评论中暗示的那样）

注意

使用.children函数意味着一旦父母重新扩展，所有“子扩展”将被“保留” - 对我而言，这似乎是自然行为。

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

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

$("ul a").click(...

Answer 2

使用jQuery手风琴插件将是满足您需求的理想方法。有关如何实现它的更多详细信息，请参见此处 jQuery Accordion

Answer 3

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

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

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

编辑：如果你想要fisrt发生，那么使用“first（）”api。

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

点击带有孩子的菜单

3 个答案: