0

我正在为我的网站制作一个工具栏，目前我已经用随机按钮填充它，如果调整窗口大小并且按钮不适合，我希望它们移动到另一个列表。

这是代码：

window.onresize = function() {
    var div = document.getElementById("button_holder");
    var divRight = document.getElementById('button_holder_right');
    var extraButton = document.getElementById('barMoreButton');
    var extraMenu = document.getElementById('extraMenu');
    var i;
    widthOfResizeMenuItems = 0;
    for (i=0;i<div.childNodes.length;i++) {
        var button = div.childNodes[i];
        if( widthOfResizeMenuItems > div.offsetWidth ) {
            button.remove();
            extraMenu.appendChild(button);
            extraButton.style.display = 'inline-block';
            divRight.width = 78;
        }else if( widthOfResizeMenuItems < div.offsetWidth ) {
            if( extraMenu.childNodes.length > 0 ) {
                div.appendChild(extraMenu.childNodes[0]);
            }
            extraButton.style.display = 'none';
            divRight.width = 52;
        }
        widthOfResizeMenuItems = widthOfResizeMenuItems + button.offsetWidth;
    }
    console.log("Count: " + i + " --- Width: " + widthOfResizeMenuItems);
}

继承人酒吧结构

div#srgapi_toolbar
    table
        tr
            td#button_holder
                button (x9)
            td#button_holder_right
                button#barMoreButton
div#extraMenu

这是一个演示：http ://api.shadowravengames.co.uk/test.php 尝试调整窗口大小以查看当前发生的情况

我做错了什么，为什么元素换行而不是移动到另一个菜单，我该如何解决？

4

1 回答 1

0

好的，找到了。有两个问题。

  1. 您必须考虑额外 barMoreButton 的大小为 26。这将解决按钮 9 未移动到蓝色菜单的问题。
  2. 通过使用 remove() 你打破了循环。
if( widthOfResizeMenuItems + 26 >= div.offsetWidth ) {
  button.remove();
  i = i-1;
  ...
}

通过减少 i 变量，您不会破坏子元素的循环。

//现在我再看一遍，当我到达按钮 4 或其他东西时，顺序就搞砸了。让我再多看一点，然后回来解决。

于 2013-08-23T19:13:38.160 回答