Javascript 逐个滚动列表项-html

我制作了一个

列表标签

，单击

向上

和

向下

箭头时，只有一个

列表项

。 经过长时间的奋斗，我终于想出了办法

我有

5个
列表项。第三个将在页面加载时可见。当我单击
up
箭头时，我会得到
第二个
和
第一个
列表项。但是如果我再次点击第三次，一切都将变得不可见

这是我的建议

另外，请帮助我添加一个
过渡
效果。当我单击
向上
或
向下
箭头时。它马上就出现了。相反，我希望自己能够顺利出现

请帮帮我。提前感谢。
这是因为当到达顶部/底部时，会删除所有活动类。请尝试以下操作：

$(document).ready(function() {
$('.up').click(function() {
    if($('.active').length==0)
            $('.dropdown li:last-child').removeClass('hide').addClass('active');    
        else    $('.active').removeClass('active').addClass('hide').prev().removeClass('hide').addClass('active')
})

$('.down').click(function() {
if($('.active').length==0)
            $('.dropdown li:first').removeClass('hide').addClass('active'); 
        else    $('.active').removeClass('active').addClass('hide').next().removeClass('hide').addClass('active')
})
});

试试这个：

var cur = 2;
$(function() {
    $('.up').click(function() {
        if(cur <= 0) return;
        var last = cur;
        cur --;
        $('.dropdown li').eq(last).addClass('hide');
        $('.dropdown li').eq(cur).css('margin-top', '-5px').removeClass('hide');
        $('.dropdown li').eq(cur).animate({marginTop: '0px'}, 'slow', function(){
            $(this).removeClass('hide');
        });

    });

    $('.down').click(function() {
        if(cur >= $('.dropdown li').length - 1) return;
        var last = cur;
        cur ++;
        $('.dropdown li').eq(last).addClass('hide');
        $('.dropdown li').eq(cur).css('margin-top', '5px').removeClass('hide');
        $('.dropdown li').eq(cur).animate({marginTop: '0px'}, 'slow', function(){
            $(this).removeClass('hide');
        });
    });
});

var cur=2；
$（函数（）{
$（'.up'）。单击（函数（）{
if（cur=$（'.dropdown li'）.length-1）返回；
var last=cur；
cur++；
$（'.dropdown li'）.eq（last.addClass（'hide'）；
$（'.dropdown li'）.eq（cur）.css（'margin-top'，'5px'）。removeClass（'hide'）；
$（'.dropdown li'）.eq（cur）.animate（{marginTop:'0px'}，'slow'，function（））{
$（this.removeClass（'hide'）；
});
});
});

以下是
像这样尝试一下：


将类添加到第一个li标记

<li class="first">First</li>

您必须检查它是否是最后一个/第一个元素，因为最后一个元素不会有next，第一个元素不会有prev。如果我想添加
转换
，请尝试此操作。我需要在
li
或
a
上应用它？我猜
-webkit过渡：所有0.5s的易用性
这就是我们需要使用的。当li标签显示五个，然后单击“下一步”时，您想看到一个还是不想在下一次单击时执行任何操作？@tilda-您提供的答案就是我想要的。但现在我需要给它添加过渡。但是我不知道在哪里或者怎样做。请帮帮我。
 if(!($('.active').hasClass('first'))){ 

$('.active').removeClass('active').addClass('hide').prev().removeClass('hide').addClass('active');
                                             }