Javascript 导航栏中选择菜单的定位

我有一个定位菜单栏的要求，所有菜单项都是相对于它们的位置放置的

比如：“所有野生动物”都会有第一个选择。 现在，在选择任何菜单项时，该项将放在第一个位置，第一个选项将是第二个，其中第一项“所有野生动物”将始终保持在第二个位置

HTML:

我可以通过上述逻辑实现这一点。我想将活动菜单放回它之前在选择其他菜单时所属的确切位置

案例： 页面上的渲染菜单如下所示： 1.所有野生动物 2.卡万戈 3.格陵兰岛东北部 4.太平洋边远 5.Papahānaumokuākea

案例1：如果点击“太平洋遥控器”->“太平洋遥控器”进入第一个位置，“所有野生动物”进入第二个位置

---

案例2：点击“Papahānaumokuākea”->“Pacific Remote”返回到第四个位置，“Papahānaumokuākea”首先出现，而“所有野生动物”保持不变。

我不确定是否允许更改html，所以我选择了js，如果可以，将索引添加到html中，您可以将js几乎减半

这是在一个“长”的方式，所以我希望你能理解的步骤

    $('.subpage_top_nav li').click(function(e) {
        e.preventDefault();

        /* find the element that needs to be moved */
        var $toBeMoved = $('.need-to-go-back')

        /* check if any1 actually needs to be moved */
        if($toBeMoved) { 

           /* grab his init position */
          var initPosition = $toBeMoved.attr('initial-position') 

          /* move the element there */
          $('.subpage_top_nav li:eq(' + initPosition + ')').after($toBeMoved)

          /* remove the signaling class */
          $toBeMoved.removeClass('need-to-go-back')

          /* remove the attr */
          $toBeMoved.removeAttr('initial-position') 
       }

       /* grab index */
       var index = $(this).index()

       /* save original index to know where it should be placed */
       $(this).attr('initial-position', index)

       /* add signaling class just to be easier to find it later */
       $(this).addClass('need-to-go-back')
       $(this).parent().prepend(this);
     });

---

它是否需要设置动画，或者只是显示最终的菜单顺序？如果不需要设置动画，只需保存菜单的原始顺序，然后在更新它以使新条目成为第一个条目之前，您可以将菜单重置为原始顺序，如果需要设置动画，则这是另一个故事

  $('.subpage_top_nav li').click(function(e) {
  e.preventDefault();
  $(this).parent().prepend(this);
});

    $('.subpage_top_nav li').click(function(e) {
        e.preventDefault();

        /* find the element that needs to be moved */
        var $toBeMoved = $('.need-to-go-back')

        /* check if any1 actually needs to be moved */
        if($toBeMoved) { 

           /* grab his init position */
          var initPosition = $toBeMoved.attr('initial-position') 

          /* move the element there */
          $('.subpage_top_nav li:eq(' + initPosition + ')').after($toBeMoved)

          /* remove the signaling class */
          $toBeMoved.removeClass('need-to-go-back')

          /* remove the attr */
          $toBeMoved.removeAttr('initial-position') 
       }

       /* grab index */
       var index = $(this).index()

       /* save original index to know where it should be placed */
       $(this).attr('initial-position', index)

       /* add signaling class just to be easier to find it later */
       $(this).addClass('need-to-go-back')
       $(this).parent().prepend(this);
     });