像手风琴一样的jQuery子菜单 [英] jQuery submenu like an accordion
问题描述
在网页 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");
});
});
现在,当您打开页面时,该子菜单是隐藏的.这是对的.单击菜单项,将显示子菜单.这是对的.没有链接到第一层的页面.然后单击第二级中的链接即可打开页面,但是第二级<ul>
隐藏了几秒钟.这是错误.
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?
推荐答案
我应该几乎重写代码
<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子菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!