使用jQuery与Bootstrap4断点插件，大分辨率下如何恢复列表项至原始状态？

这个问题的核心是你得在移动元素前先保存它的原始位置信息，不然大屏幕下根本不知道该把元素插回哪里。我给你一套完整的解决方案，兼顾性能和准确性：

核心思路 #

在小屏幕第一次移动active列表项时，记录它原本的位置参照（比如前一个兄弟元素），同时标记元素已经被移动；当切换到大屏幕时，根据保存的位置信息把元素插回原位，并重置标记避免重复操作。

完整代码实现 #

// 全局变量保存原始状态，避免每次resize都重复执行操作
let originalActiveSibling = null;
let hasMovedActive = false;

$(document).ready(adjustNavPosition);
$(window).resize(adjustNavPosition);

function adjustNavPosition() {
  const $navList = $('ul.page-nav-list');
  const $activeLi = $navList.find('li.active');
  
  // 确保存在active元素再执行后续逻辑
  if (!$activeLi.length) return;

  // 用Bootstrap Breakpoint插件判断是否为小屏幕（请根据你的插件实际API调整，比如多数插件用Breakpoint.is('xs')）
  const isXsScreen = Breakpoint.is('xs');

  if (isXsScreen) {
    if (!hasMovedActive) {
      // 保存active元素的前一个兄弟节点，作为原始位置的参照
      originalActiveSibling = $activeLi.prev();
      // 将active元素移到列表末尾
      $activeLi.appendTo($navList);
      hasMovedActive = true;
    }
  } else {
    if (hasMovedActive) {
      // 恢复原始位置：如果有前一个兄弟，就插在它后面；否则插在列表最前面
      if (originalActiveSibling.length) {
        $activeLi.insertAfter(originalActiveSibling);
      } else {
        $activeLi.prependTo($navList);
      }
      hasMovedActive = false;
    }
  }
}

// 额外处理：如果用户点击切换active项，实时更新原始位置记录
$('ul.page-nav-list').on('click', 'li', function() {
  const $newActive = $(this);
  $newActive.siblings().removeClass('active');
  $newActive.addClass('active');

  // 如果当前是大屏幕，更新原始位置参照
  if (!Breakpoint.is('xs')) {
    originalActiveSibling = $newActive.prev();
    hasMovedActive = false;
  }
});

关键细节说明 #

• 避免重复操作：用hasMovedActive标记，防止窗口resize时多次执行移动/恢复逻辑，减少不必要的DOM操作。
• 准确恢复位置：通过originalActiveSibling记录元素的原始上下文，确保插回的位置和初始状态完全一致，不会出现位置错乱。
• 兼容active项切换：如果用户可以点击切换active列表项，监听点击事件实时更新原始位置记录，避免切换后恢复位置出错。
• 插件API适配：请根据你使用的Bootstrap 4 Breakpoint插件实际API调整屏幕判断逻辑，比如替换成插件提供的is('xs')或类似方法。

内容的提问来源于stack exchange，提问作者wolekpl