Question

我正在创建一些Javascript代码，以便溢出的菜单链接将移动到一个名为more的单独菜单中。

首次加载时，它完美运行。然而，当它再次运行时，事情就开始变得很糟糕......

这里的代码段：

var tele = document.getElementById('teleporter'),
  	rec = document.getElementById('receiver');

window.onresize = resize;
resize();

function resize() {
  var rChildren = rec.children,
   	 numW = 0;

  for (var i = 0; i < rChildren.length; i++) {
    var child = rChildren[i];
   	var fragment = document.createDocumentFragment().appendChild(child);
    child.outHTML = '';
    tele.appendChild(fragment);
  }
  
  var teleW = tele.offsetWidth,
     tChildren = tele.children;

  for (var i = 0; i < tChildren.length; i++) {
    var child = tChildren[i];
    numW += child.offsetWidth;

    if (numW > teleW) {
      var fragment = document.createDocumentFragment().appendChild(child);
      child.outHTML = '';
      rec.appendChild(fragment);
      i--;
    }
  }
  
}

#teleporter {
  height: 20px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

li {
  float: left;
  padding: 0 10px;
  box-sizing: border-box;
  list-style: none;
}

<ul id="teleporter">
  <li>List item 0</li>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
  <li>List item 7</li>
  <li>List item 8</li>
  <li>List item 9</li>
  <li>List item 10</li>
  <li>List item 11</li>
  <li>List item 12</li>
  <li>List item 13</li>
</ul>
<div>More:
  <ul id="receiver"></ul>
</div>

为什么不起作用？

Answer 1

我重写了你的resize函数以避免for循环，很可能错误在于你的i，而且除非你因为某个特定原因这样做而你可以避免使用片段变量，在下面找到修改后的resize ，作品

<div id="main">
  <div id="fixed"></div>
</div>

更新小提琴： https://jsfiddle.net/e34p0t6w/3/

元素顺序从移动元素两次后被混淆

1 个答案: