[英]jQuery toggle dropdown menu with toggle arrow
我正在尝试使用可通过箭头切换激活的下拉菜单来创建垂直菜单,同时仍保持顶层链接处于活动状态且可单击。 我使用的是自定义CMS,因此我如何进行这项工作受到一些限制。
的HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
因此,我有一个非常简单的UL LI菜单系统。 我已经在导航栏的顶层添加了模板,我想将其用作切换开关。 范围可以更改为任何值,这就是我目前在其中所拥有的。
我遇到的问题是,鉴于这是一个模板系统,我可以选择输入跨度,但是没有选择根据ul.subnav是否在同一li中有条件地显示它。 因此,我需要一些将display:block应用于实际满足此条件的方法,然后我将只显示:默认情况下,其他范围都没有。
我尝试使用此解决方案,但确实可以使用,但不适用于多个下拉菜单,只有在菜单结构中只有一个下拉菜单实例时,它才似乎有效。
jQuery Toggle下拉菜单和http://jsfiddle.net/hXNnD/1/
Java脚本
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
我创建了另一个具有2个子UL的示例,因此您可以看到代码下降的地方。
用CSS隐藏您的跨度并进行以下操作: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
我想这就是您想要的。 我可能是错的。
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.