Question

点击up和down箭头时显示的列表项。

当我点击它时。它立即出现，我不希望它像那样。

我想添加一个转换，但我不知道是否将其应用于li或a标记。

此外，我在这里隐藏并在点击时显示li个项目。但是当我点击transition箭头时，我需要up，我希望隐藏元素向下推动活动元素，反之亦然。

有人帮助我。

Answer 1

我更新了您的FIDDLE 你可以看一下。

var
    cur = 2,
    $container = $('.dropdown-container'),
    $ul = $('.dropdown'),
    $ul_length = $('.dropdown li').children().length,
    $up = $('.up'),
    $down = $('.down'),

    changeLi = function (cur) {
        var $cur_li = $('.dropdown li:nth-child(' + cur + ')');
        $('.current_selected').removeClass('current_selected');
        $cur_li.addClass('current_selected');

        $container
            .height($cur_li.outerHeight())
            .width($cur_li.outerWidth());

        $up.offset({
            left: ($container.outerWidth() - $up.outerWidth()) / 2
        });

        $down.offset({
            left: ($container.outerWidth() - $down.outerWidth()) / 2
        });

        $ul.animate({
            top: -$cur_li.position().top
        }, 200);

    };

$up.on('click', function () {
    cur--;
    if (cur < 1) {
        cur = 1;
        return false;
    }
    changeLi(cur);
});

$down.on('click', function () {
    cur++;
    if (cur > $ul_length) {
        cur = $ul_length;
        return false;
    }
    changeLi(cur);
});

changeLi(cur);

Answer 2

您可以添加slideUp，slideDown等动画。

var cur = 2;

$('.up').click(function() {
    if(cur <= 0) return;
    var last = cur;
    cur --;
    $('.dropdown li').eq(last).hide(500).addClass('hide');
    $('.dropdown li').eq(cur).show(100).removeClass('hide');
});

$('.down').click(function() {
    if(cur >= $('.dropdown li').length - 1) return;
    var last = cur;
    cur ++;
    $('.dropdown li').eq(last).hide(500).addClass('hide');
    $('.dropdown li').eq(cur).show(100).removeClass('hide');
});

转换列表项滚动 - HTML

2 个答案: