Javascript 转换列表项滚动-HTML

这是我的建议

单击

向上

和

向下

箭头时显示的列表项

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

我想给它添加一个转换，但我不知道是在

li

还是

a

标记上应用它

此外，我在这里隐藏和显示点击后的

li

项目。但是我需要

转换

就像当我点击

向上

箭头时，我希望隐藏元素向下推动活动元素，反之亦然

---

有人帮我做这件事。

你可以添加动画，如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');
});

var cur=2；
$（'.up'）。单击（函数（）{
if（cur=$（'.dropdown li'）.length-1）返回；
var last=cur；
cur++；
$（'.dropdown li'）.eq（last.hide（500）.addClass（'hide'）；
$（'.dropdown li'）.eq（cur）.show（100）.removeClass（'hide'）；
});

我更新了您的 你可以去看看

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

var
cur=2，
$container=$（'.dropdown container'），
$ul=$（“.下拉列表”），
$ul_length=$（'.dropdown li'）.children（）.length，
$up=$（“.up”），
$down=$（'.down'），
changeLi=功能（cur）{
变量$cur_li=$（'.下拉列表li:n个子项（'+cur+'））；
$（'.current_selected'）。removeClass（'current_selected'）；
$cur_li.addClass（'current_selected'）；
$container
.height（$cur_li.outerHeight（））
.宽度（$cur_li.outerWidth（））；
$up.offset({
左：（$container.outerWidth（）-$up.outerWidth（））/2
});
$down.offset({
左：（$container.outerWidth（）-$down.outerWidth（））/2
});
$ul.animate({
顶部：-$cur_li.position（）.top
}, 200);
};
$up.on（'click'，函数（）{
cur--；
if（cur<1）{
cur=1；
返回false；
}
changeLi（cur）；
});
$down.on（'click'，函数（）{
cur++；
如果（当前>超长）{
cur=$ul_长度；
返回false；
}
changeLi（cur）；
});
changeLi（cur）；

当我添加

slideUp

或

slideDown

时，它不起作用。实际上我忘了。我接受了答案。你已经删除了所有的

隐藏

类，并使用了

动画

和定位属性权限？是的。。它现在还支持长的和多行的。太神了非常感谢你。顺便说一句，

--

和

++

逐个增加或减少一个数值变量。