Question

我已经看到了一些类似的问题，但答案似乎是围绕移动菜单和常规菜单之间的二进制切换，其中一些JS用于隐藏常规菜单（并显示移动菜单）任何菜单项溢出。

我要做的是从常规菜单中删除单个LI元素，并根据需要将它们移动到溢出菜单中，

我会试着说明一下;

初始菜单状态;

Home | About | Products | Services | Stuff | Contact

中间状态（窗口已调整大小并且“联系人”已移入溢出区域，“...”是溢出菜单，其中包含所有隐藏项目。

Home | About | Products | Services | Stuff | ...

窗口已经缩小了，现在只有前两个菜单项可以放入，其余的都在溢出区域

Home | About | ...

基本上，我只是想要一些方法来检测特定LI何时进入溢出区域，以便我可以相应地对其进行操作。我已经在使用jQuery，所以我对任何jquery解决方案都很好。

Answer 1

所以我花了太多时间在这上面:-)
它可以做到，但它证明是非常棘手的。

一种方法是在窗口调整大小时循环浏览菜单，看看li顶部位置是否大于零。如果是这样，请将其移至下一个菜单。

我的演示只将它们从第1个菜单移到第2个菜单。你需要找到一种方法将它们移回去。

这是代码。抱歉，我无法获得完整的工作版本，但兄弟需要重新开始工作！ http://jsfiddle.net/rxs6q12d/3/

PS。 StackOverflow在链接到jsfiddle时需要一个代码片段。这与这篇文章无关，所以我只是......

// include some code!

Answer 2

添加到Joe的回答：

http://jsfiddle.net/ha77c42h/1/

我们重置原始设置，然后重新计算第二个菜单。这不会很好地扩展，但对于少量元素来说它足够好。

特别补充：

var allArray   = new Array();
$('#menu1 li').each((index, elem) => {
    allArray.push($(elem));
})
$('#menu2 li').each((index, elem) => {
    allArray.push($(elem));
})
$(allArray).each((index, elem) => {
    $(elem).appendTo('#menu1');
})
$('#menu1 li').each(function(index, elem){
    var myposition = $(elem).position();
...

将菜单项移动到溢出div作为菜单调整大小？

2 个答案: