0

我有这个菜单：

           <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 制作每个点击功能。

有人可以帮我简化吗？

4

4 回答 4

1

使用 class 而不是 id 来绑定事件，这样您就不需要 id 来绑定 click 事件。

$('.clearfix li').click(function(){
    $('#submenu li').removeClass('active');
    $(this).addClass('active');    
    $('.sublist.second_list').hide();
    $('.sublist.first_list').fadeIn();
});
于 2012-11-14T17:11:07.233 回答
1

这是我会采取的方法：

更新：我忘了提，你也可以摆脱 clearfix 类。

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();
});

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

于 2012-11-14T18:10:46.827 回答
0

如果您以这种方式完成结构或以这种方式更改结构，请使用它：

<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();
});
于 2012-11-14T17:19:00.163 回答
0

检查这个小提琴

使用 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();
});​
于 2012-11-14T17:21:52.990 回答