0

次のように機能するシンプルなメニュースライダーを実現しようとしています:

$(document).ready(function()    {

    // hide slider images on page load \\
    $('.sImage1, .sImage2,.sImage3, .sImage4').hide();

    // slide sImage1 on page load\\
    $('.sImage1').delay(500).slideDown(1000);
    // provide slider image click functionallity \\
    $('.sOpen1').click(function()   {
        // close any already open images \\
        $('.sImage2, .sImage3, .sImage4').slideUp(500);
        // open/close sImage1 \\
        $('.sImage1').stop().slideToggle(500);          
    }); //end click 1


    $('.sOpen2').click(function()   {
        $('.sImage1, .sImage3, .sImage4').slideUp(500);
        $('.sImage2').stop().slideToggle(500);          
    }); //end click 2
    $('.sOpen3').click(function()   {   
        $('.sImage1, .sImage2, .sImage4').slideUp(500);
        $('.sImage3').stop().slideToggle(500);          
    }); //end click 3
    $('.sOpen4').click(function()   {
        $('.sImage1, .sImage2, .sImage3').slideUp(500);
        $('.sImage4').stop().slideToggle(500);          
    }); //end click 4
}); // end ready

html:

 <div id="menuSlider">
    <ul>            
        <li class="sOpen1">Course Information</li>
        <li class="sImage1"><img src="#" /></li>
        <li class="sOpen2">Membership</li>
        <li class="sImage2"><img src="#" /></li>
        <li class="sOpen3">Equipment</li>
        <li class="sImage3"><img src="#" /></li>
        <li class="sOpen4">Golf Lessons</li>
        <li class="sImage4"><img src="#" /></li>
    </ul>
</div>

現時点では、表示する画像は 4 つしかありませんが、10 以上になる可能性があるため、多くのコード行を使用せずに同じことを達成する簡単な方法があると思いますか?

私はまだjavascriptとjqueryを学んでいますが、配列などを使用して同じことを達成する方法についての良いチュートリアルの方向性を教えていただければ幸いです。

4

3 に答える 3

1

これを次のように減らすことができます。

$(document).ready(function()    {

    $('.sImage').hide();  
    $('.sImage:first').delay(500).slideDown(1000); //slide down the first image
    $('.sOpen').click(function()   {  //register the handler for .sOpen as a common click event
        $('.sImage')
               .not(
                      $(this).next().slideToggle(500) //SlideUp other images except the one next to the clicked element which will be slideToggled
               ).slideUp(500);
    }); 
    
});

マークアップの変更: (トリガーのクラスのインデックスとコンテンツの li 要素を削除します)

<div id="menuSlider">
    <ul>            
        <li class="sOpen">Course Information</li>
        <li class="sImage"><img src="#" /></li>
        <li class="sOpen">Membership</li>
        <li class="sImage"><img src="#" /></li>
        <li class="sOpen">Equipment</li>
        <li class="sImage"><img src="#" /></li>
        <li class="sOpen">Golf Lessons</li>
        <li class="sImage"><img src="#" /></li>
    </ul>
</div>

これにより、新しいクラス名、ハンドラーなどを変更/追加することなく、新しいアイテムをいくつでも追加できます。

デモ

見る

于 2013-06-13T03:59:52.630 に答える
0

ここを見てみてください：

www.w3schools.com/jquery/jquery_animate.asp

www.w3schools.com/css3/css3_animations.asp

于 2013-06-13T04:00:27.430 に答える
0

jQuery の UI Accordionを単純に使用すると、おそらくさらに簡単になります。

次に、単純に次のようにすることができます。

$(function () {
    $("#menuSlider").accordion();
});

次に (h タグと div タグを使用):

<div id="menuSlider">
    <h3>Course Information</h3>
    <div>
        <img src="#" />
    </div>
    <h3>Membership</h3>
    <div>
        <img src="#" />
    </div>
    <h3>Equipment</h3>
    <div>
        <img src="#" />
    </div>
    <h3>Golf Lessons</h3>
    <div>
        <img src="#" />
    </div>
</div>
于 2013-06-13T06:28:30.653 に答える