javascript - Jquery 菜单 ul 切换

Question

我有这个菜单:

           <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 都具有点击功能。

谁能帮我简化一下？

Answer 1

使用class而不是id来绑定(bind)事件，这样你就不需要id来绑定(bind)点击事件了。

$('.clearfix li').click(function(){
    $('#submenu li').removeClass('active');
    $(this).addClass('active');    
    $('.sublist.second_list').hide();
    $('.sublist.first_list').fadeIn();
});