如何移动清单项目? [英] How do I move list items?

问题描述

我有一个正常的无序列表

I have a normal unordered list

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

当我单击任何一个列表项时，它应该显示在列表的第二个位置，如果可能的话，它会显示到第二个位置.

When I click on any of the list items it should appear 2nd in the list, if possible animate to second position.

我知道一个简单的解决方案是将UL相对定位，并将LI绝对定位并设置最高位置，但这是不可能的，因为标记的编写方式.

I know an easy solution for this would to relatively position the UL and absolutely position the LIs and set the top position, but this not possible because of the way the markup is written.

推荐答案

除了动画之外，此操作不做任何其他事情:

This does everything but the animation:

$('li').click(function() {
    var $this = $(this);
    $this.insertAfter($this.siblings(':eq(0)'));
});

当您单击列表项时，它将插入到<ul>中的第一项之后，即列表中的第二个位置.

When you click on a list item, it will insert it after the first item in the <ul>, i.e. the second position in the list.

此外，您可以通过多种方式对此进行动画处理.这是一个:

Furthermore, you could animate this in various ways. Here's one:

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

这是一个工作演示.

这篇关于如何移动清单项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！