jquery – 如何移动列表项?

前端之家收集整理的这篇文章主要介绍了jquery – 如何移动列表项?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个正常的无序列表
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

当我点击任何列表项目时,应该在列表中显示第二个,如果可能,动画到第二个位置.

我知道一个简单的解决方案,这将相对定位UL,并绝对定位LIs并设置顶部位置,但这不可能,因为标记的方式写.

解决方法

除了动画之外,它除了一切
$('li').click(function() {
    var $this = $(this);
    $this.insertAfter($this.siblings(':eq(0)'));
});

当您点击列表项目时,它会将其插入到< ul>中的第一个项目之后,即列表中的第二个位置.

此外,您可以以各种方式动画化.这是一个:

$('li').click(function() {
    var $this = $(this),callback = function() {
            $this.insertAfter($this.siblings(':eq(0)'));
        };
    $this.slideUp(500,callback).slideDown(500);
});

这是一个working demo.

猜你在找的jQuery相关文章