我有这个菜单:
<ul id="submenu" class="clearfix">
<li><a href="javascript:void(0)">Vedella</a></li>
<li><a href="javascript:void(0)">Minis de vedella</a></li>
<li><a href="javascript:void(0)">Vaca</a></li>
<li><a href="javascript:void(0)">Poltre</a></li>
<li><a href="javascript:void(0)">Porc Ibèric</a></li>
<li><a href="javascript:void(0)">Pollastre</a></li>
<li><a href="javascript:void(0)">Gall d´indi</a></li>
<li><a href="javascript:void(0)">Bou</a></li>
</ul>
每个“#submenu” li 淡入一个 ul 子列表并隐藏其他子列表。
这是子列表:
<ul class="sublist first_sublist">
<li><a href="javascript:void(0)">Normal </a></li>
<li><a href="javascript:void(0)">All i Julivert</a></li>
<li><a href="javascript:void(0)">Formatge Roquefort</a></li>
<li><a href="javascript:void(0)">Ceba</a></li>
</ul>
<ul class="sublist second_sublist">
<li><a href="javascript:void(0)">Mini-Hamburgueses</a></li>
<li><a href="javascript:void(0)">Surtit Mini-Hamburgueses</a></li>
</ul>
<ul class="sublist third_sublist">
<li><a href="javascript:void(0)">Normal</a></li>
</ul>
<ul class="sublist fourth_sublist">
<li><a href="javascript:void(0)">Poltre</a></li>
</ul>
<ul class="sublist fifth_sublist">
<li><a href="javascript:void(0)">Porc ibèric de Gla</a></li>
</ul>
这个CSS:
.second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
display: none;
}
使用此脚本:
$('#submenu li').click{
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});
脚本的问题是,如果我有五个子列表,它会变得更大,因为我必须根据“#submenu”li 制作每个点击功能。
有人可以帮我简化吗?