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.