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来绑定事件，这样您就不需要id来绑定click事件。

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

Answer 2

这是我要采取的方法：

更新：我忘了提及，你也可以get rid of the clearfix class。

<强> HTML

<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>

<ul class="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">
    <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">
    <li><a href="javascript:void(0)">Normal</a></li>
</ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Poltre</a></li>
</ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Porc ibèric de Gla</a></li>
</ul>

<强>的JavaScript

$('#submenu li').on('click',function(){
    $this = $(this);
    // move active class to current list item
    $this.addClass('active').siblings().removeClass('active');
    // make sure all the sublists are hidden,
    // then determine the position of the list item
    // in the ul, and select the corresponding sublist
    // ex: selecting the 2nd list item in submenu would
    // find the 2nd sublist and fadeIn
    $('.sublist').hide().eq($this.index()).fadeIn();
});

当然，这意味着子列表必须与子菜单列表项的顺序相同。

Answer 3

如果您以这种方式完成了结构，或者如果您改变了这种方式，请使用此方法：

<ul id="submenu" class="clearfix">
    <li><a href="javascript:void(0)">Vedella</a>
        <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>
    </li>
</ul>


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

Answer 4

<强> Check this fiddle

使用HTML-5数据属性在其中存储相应的子列表。接近这种方式，您可以使用单个处理程序来显示/隐藏页面上的子列表。

<强> HTML

 <ul id="submenu" class="clearfix">
    <li><a href="javascript:void(0)" data-class="first_sublist">Vedella</a></li>
    <li><a href="javascript:void(0)" data-class="second_sublist">Minis de vedella</a></li>
    <li><a href="javascript:void(0)" data-class="third_sublist">Vaca</a></li>
    <li><a href="javascript:void(0)" data-class="fourth_sublist">Poltre</a></li>
    <li><a href="javascript:void(0)" data-class="fifth_sublist">Porc Ibèric</a></li>
    <li><a href="javascript:void(0)" data-class="first_sublist">Pollastre</a></li>
    <li><a href="javascript:void(0)">Gall d´indi</a></li>
    <li><a href="javascript:void(0)">Bou</a></li>
 </ul>

<强>的Javascript

$('#submenu li a').on('click',function() {
    var $this = $(this);
    var className = $this.data("class");
    $('#submenu li a').removeClass('active');
    $this.addClass('active');
    $('.sublist').hide();

    $('.'+ className).show();
});

Jquery菜单ul切换

4 个答案: