我为购物网站构建了一个CSS菜单。想法是点击主要类别然后slideToggle开始并加载子类别。我已经构建了原则并且正在查看jQuery .children
但是当我点击链接时,什么也没发生。
我的jQuery如下:
$('ul.sub_menu').css('display','none');
$(".nav-list li a.clickable").toggle(function () {
$(this).children().slideToggle();
}, function() {
$(this).children().slideToggle();
}
我的HTML结构就像这样...
<ul class="nav nav-list">
<li>
<a class="clickable" href="#">Christmas</a>
<ul class="sub_menu">
<li>
<a href="/~sweetdis/category/wreaths" >Wreaths</a>
</li>
<li>
<a href="/~sweetdis/category/large-logs">Large Logs</a>
</li>
</ul>
</li>
</ul>
我在这里错过了一些东西吗?
非常感谢
答案 0 :(得分:2)
试试这个 -
$('.sub_menu').hide();
$('.clickable').click(function(){
$(this).next('ul').slideToggle();
});
或 -
$('.ulClass li a:first').click(function(){
$(this).next('ul').slideToggle();
});
点击clickable
时没有任何事情发生,因为它没有任何孩子
答案 1 :(得分:2)
由于您在slideToggle
的小孩anchor
的子级中使用clickable
时,如果此锚没有子级,则可以使用siblings
代替:
$('ul.sub_menu').css('display','none');
$(".nav-list li a.clickable").click(function () {
$(this).siblings('ul.sub_menu').slideToggle();
});
FIDDLE: http://jsfiddle.net/QqMks/