0

在网页oshadi-yoga.ch上，我想获得一个带有如下列表的导航菜单：

<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 来获得手风琴效果。如果您单击第一级，则第二个列表将以切换效果打开：

    $(function() {
        $("#lbar li.section-title ul").hide();
        $("#lbar li.section-title").click(function() {
            $(this).find("ul").toggle();
        });
    });

    $(function() {
        $("#lbar li.section-titleact ul").show();
        $("#lbar li.section-titleact").click(function() {
            $(this).find("ul").toggle();
        });
    });

    $(function() {
        $("#lbar li.section-titleact ul li a").click(function() {
            $("#lbar li.section-titleact ul").css("display", "block");
        });
    });

现在，当您打开页面时，子菜单会被隐藏。这是对的。您单击一个菜单项并显示子菜单。这是对的。第一级没有指向页面的链接。然后您单击页面打开的第二级中的链接，但第二级<ul>隐藏了几秒钟。这是错误。

不幸的是，我无法更正 jquery 脚本。有人可以帮助我或有我需要的菜单示例吗？

4

1 回答 1

0

我应该稍微重写一下代码

<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>

添加了一个跨度。

jQuery：

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

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

于 2012-04-20T17:25:47.160 回答