像手风琴一样的 jQuery 子菜单

问题描述：

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

on the webpage oshadi-yoga.ch i like to get an navigation menu with a list like this:

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

i wrote some jquery to get an accordion effect. if you click the first level the second list shall open with an toggle effect:

    $(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");
        });
    });

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

隐藏了几秒钟.这是错误.

now the submenu is hidden when you open the page. this is correct. you click a menu-item and the submenu is shown. this is correct. there is no link to a page in the first level. then you click a link in the second level the page is opened, but the second level <ul> is hidden for a few seconds. this is the error.

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

unfortunately i'm not able to correct the jquery script. can someone help me or has an example of a menu i need?

答

我应该稍微重写一下代码

I should rewrite the code al little

<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();
});

我希望这会有所帮助(或者我有点误解了这个问题?)

I hope this helps a little (or misunderstood I the question a bit?)

像手风琴一样的 jQuery 子菜单

相关推荐