Question

我有一个＆＃34;菜单栏＆＃34; （因为没有更好的术语），基本上是980px的固定宽度ul。 li元素在页面加载时填充，并包含图像，范围和分隔符（对于下一个li）。

如果li个元素太多，它们会溢出到下一行。我希望通过在填充列表后运行一些JS / jquery来准备这样的事件，将所有溢出元素移动到另一个div中，这实际上是一个带有元素的css悬停菜单（它会说＆＃39 ; ...查看更多＆＃39;或类似的内容。

我的初始方法是在填充菜单后检查菜单的总宽度是否超过某个数字，如果是，则将最后一个元素附加到新div以进行溢出。这个函数要么循环一个变量检查菜单的宽度，要么递归地调用自己，无论哪个。我得到了使用if语句的基本功能，但它是一个要测试的迭代 - 最后一个元素已成功移动到div。不幸的是，当我尝试迭代它（循环或递归）时，浏览器似乎在js中进入无限循环并且从未正确加载页面。

我当前尝试的版本如下：

    /**code for populating etc happens here ... then calls trimList(); */
    function trimList(){
       var menuWidth = $('#menu').width();
       if(menuWidth > 700){
          $('#menu li:last-child').appendTo('#overflowList');
          trimList();
       }
    }

使用此版本或while循环，浏览器最终会崩溃，但我不确定原因。我确定它是显而易见的。

我想要修复我当前的实现，或者以其他方式执行（也许 - 如果宽度更长，请抓取超出该宽度的所有元素，并将它们放入div中。一下子，而不是迭代。但我不确定抓住第一个违规（边界推动）元素的最佳方法是什么。）

我确信这很简单，我正在努力弄清楚现在导致这个问题的原因。

由于

编辑：见下文 - 解决了我的问题

Answer 1

修正了它！

问题是'溢出'div在菜单div中，我的CSS选择器针对所有后代。因此，在第一次迭代之后，每个后续.appendTo都会定位已经附加的$('#menu li:last-child')。永远不会达到停止条件，并且无休止地迭代......堆栈溢出。

为了澄清，我的回答是将$('#menu > li:last-child)更改为{{1}}。现在效果很好。

将div中溢出的所有元素水平移动到另一个元素

1 个答案: