2

我有一个“菜单栏”（因为没有更好的术语），它基本上是 980 像素的固定宽度ul。这些li元素在页面加载时填充，并包含一个图像、一个跨度和一个分隔符（用于 next li）。

如果元素太多li，它们会溢出到下一行。我想通过在填充列表后运行一些 JS/jquery 来为这样的事件做准备，以将所有溢出元素移动到另一个 div 中，这本质上是一个带有元素的 CSS 悬停菜单（它会说'.. .查看更多'或类似）。

我最初的方法是在填充菜单后检查菜单的总宽度是否超​​过某个数字，如果是，则将最后一个元素附加到新 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 中。一次，而不是迭代。但是我不确定抓住第一个违规（边界推动）元素的最佳方法是什么。）

我确定这很简单，我现在只是在努力找出导致问题的原因。

谢谢

编辑：见下文 - 修复了我的问题

4

1 回答 1

0

解决它！

问题是“溢出” div 在菜单 div 内，我的 CSS 选择器针对所有后代。因此，在第一次迭代之后，每个后续都.appendTo针对已经附加的那个。永远不会达到停止条件，并且无休止地迭代......堆栈溢出。

为了澄清起见，我的回答涉及更改$('#menu li:last-child')为$('#menu > li:last-child). 现在效果很好。

于 2013-05-22T23:42:05.973 回答