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