Question

我正在尝试实现一个像这样工作的简单菜单滑块：

$(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，但如果有人能指出我如何使用数组或类似方法实现相同的好教程，那将非常感激。

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

使用此功能，您可以添加任意数量的新项目，而无需更改/添加新的类名，处理程序等。

Demo

见

Answer 2

试着看这里：

www.w3schools.com/jquery/jquery_animate.asp

www.w3schools.com/css3/css3_animations.asp

Answer 3

如果您只是使用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>

简单的jquery滑块菜单

3 个答案:

Demo