jQuery子菜单就像手风琴一样

在网页上，我想获得一个导航菜单，其中包含如下列表：

<ul>
    <li class="section-title">Yoga
        <ul style="display: none;">
            <li><a href="/">Approach</a></li>
            <li><a href="/">Asanas</a></li>
            <li><a href="/">Yoga</a></li>
            <li><a href="/">Kirtan</a></li>
        </ul>
    </li>
</ul>

现在，打开页面时，子菜单将隐藏。这是正确的。单击菜单项，将显示子菜单。这是正确的。在第一级中没有指向页面的链接。然后单击第二级中的链接，页面将打开，但第二级

将隐藏几秒钟。这就是错误所在

---

不幸的是，我无法更正jquery脚本。有人能帮我吗，或者有一个我需要的菜单的例子吗？

我应该重写一下代码

<ul>
    <li class="section-title"><span>Yoga</span>
        <ul style="display: none;">
            <li><a href="/">Approach</a></li>
            <li><a href="/">Asanas</a></li>
            <li><a href="/">Yoga</a></li>
            <li><a href="/">Kirtan</a></li>
        </ul>
    </li>
</ul>

我希望这有点帮助（或者我有点误解了这个问题？

我没有时间（即将离任）给你一个真正的答案，也许以后吧，但现在，我有一个jsFiddle来回答一个类似的问题--单击

MAin 2

，然后单击其中的主内部，并观察下拉菜单的操作--

<ul>
    <li class="section-title"><span>Yoga</span>
        <ul style="display: none;">
            <li><a href="/">Approach</a></li>
            <li><a href="/">Asanas</a></li>
            <li><a href="/">Yoga</a></li>
            <li><a href="/">Kirtan</a></li>
        </ul>
    </li>
</ul>

$('.section-title > span').on('click', function()
{
    $(this).siblings('ul').slidetoggle();
});