Question

我制作了list tag，点击list item和up箭头时只会出现一个down。实际上，我经过长时间的努力想出了如何制作它。

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

另外请帮我添加transition效果。当我点击up或down箭头时。它立刻出现了。相反，我希望能够顺利出现。

请帮帮我。提前谢谢。

Answer 1

试试这个：

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');
        });
    });
});

这是demo

Answer 2

这是因为当到达顶部/底部时从所有活动类中删除。试试这个：

$(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')
})
});

<强> working fiddle

Answer 3

试试这样：

fiddle

将类添加到第一个li标签。

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

如果活跃的li标签有该类，则不要做任何事情。

 if(!($('.active').hasClass('first'))){ 

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

滚动列表项目一个接一个 - html

3 个答案: