jquery如何将移动的无序列表项返回到列表中的原始位置？

Question

所以即时工作在移动菜单上，我想要发生的是用户点击列表项并让该项移动到列表的顶部，然后当用户点击另一个项时，它将第一个项移回它的原始位置和第二个项目进入第一个位置。所以我坚持第二部分，我不知道如何执行它。我已经尝试将列表存储在一个数组中，并使用拼接添加和删除项目，但我无法让它正常工作，任何帮助都将非常感谢。

$(".article-featured__navigation-menu-mobile li").click(function(){
  var item = $(this).addClass('active-state');
  $(".article-featured__navigation-menu-mobile").prepend(item);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="menu-item active-state"><a href="#" class="tax-filter" >0</a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="1">1 </a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="2">2 </a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="3">3 </a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="4">4 </a></li>
</ul>

Answer 1

您可以使用Flexbox执行此操作，并利用order属性，该属性指定flex-containers内flex-items的布局顺序。换句话说，无论它们在DOM中的位置如何，您都可以操纵元素的顺序。

我还对jQuery进行了一些修改，以便为您提供所需的结果：

$("ul li").click(function(){
  $(this).addClass('active-state').siblings().removeClass('active-state');
});

ul {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically (assuming the mobile menu layout) */
  list-style: none;
}

.active-state {
  order: -1; /* the initial value of the order property is set to 0, i gave it -1 because of the changed direction, otherwise it would have been 1, i.e. place it above the others because of the higher value */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="menu-item"><a href="#" class="tax-filter" >Link 0</a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="1">Link 1 </a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="2">Link 2 </a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="3">Link 3 </a></li>
  <li class="menu-item"><a href="#" class="tax-filter" title="4">Link 4 </a></li>
</ul>