Jquery 单击“带子菜单”

我正在寻找某种jQuery单击菜单，如果单击的

li

元素有子元素，它将打开另一个

ul

——类似这样的

<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”，它将打开另一个列表，依此类推

---

我想我曾经看过一些关于

。接下来

，但我不太确定。

这应该可以满足您的需要：

$("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元素中包含链接的一个示例可能如下所示：

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

---

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

---

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

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

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

编辑：如果希望第一次出现，请使用“first（）”api

---

Ref:

这似乎正是我想要的请原谅我的愚蠢-这可以与f.x.slideDown/slideUp@MortenHagh：切换功能负责检查元素的当前可见性。如果需要自定义显示/隐藏代码，则需要拆分代码。。这很好用！非常感谢：）愿一切美好的东西都归你！还有一个问题-当另一个家长被点击时，它可以扩展到关闭打开的菜单吗？@MortenHagh:不知道你的意思？尝试将

子项

更改为

查找

-这就是您想要的吗？