Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: