jquery - 使用 jquery 旋转 li 项目

Question

我有一个 UL 列表，例如:

<ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
</ul>

我想将此列表用作动画 JQuery 菜单。以这样的方式进行设置:如果用户单击 menu3，它将成为列表中的第一项，因为 menu1 和 menu2 会附加到末尾。

因此，单击 menu3 后，ul 将如下所示:

<ul>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
  <li>menu1</li>
  <li>menu2</li>
</ul>

任何指导或建议将不胜感激。

Answer 1

你可以这样做:

$("li").click(function() {
    var prev = $(this).prevAll();
    $.unique(prev).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
    });
});​​​

Give it a try here ，$.unique()调用是因为 .prevAll() 中的元素是相反的顺序...并且为了附加到末尾，我们希望它们按文档顺序排列。