javascript - 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 property 指定布局 <flex-items 在 flex-containers 中的 em>顺序。换句话说，您可以操纵元素的顺序，而不管它们在 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>