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」のそれぞれが 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();
});

スクリプトの問題は、5 つのサブリストがあるとスクリプトが大きくなることです。これは、"#submenu" li ごとにすべてのクリック関数を作成する必要があるためです。

誰かがそれを簡単にするのを手伝ってくれますか?

4

4 に答える 4

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 に答える
1

クリック イベントのバインディングに id が必要ないように、バインディング イベントに id の代わりに class を使用します。

$('.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 に答える
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 に答える
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 に答える