优雅处理空间受限下的选项溢出：将选项折叠到下拉菜单
在界面设计中，经常遇到选项过多导致空间不足的情况。本文介绍一种方法，将溢出的选项巧妙地折叠到下拉菜单中，提升用户体验。 此方法比直接使用现成插件更灵活，更易于定制。
核心思路在于动态判断元素是否溢出容器，并根据结果调整显示方式。 具体步骤如下：
-
计算元素宽度: 获取每个选项元素的实际宽度。
-
判断溢出: 计算所有选项元素的总宽度，判断是否超过容器可用宽度。
-
条件渲染: 如果总宽度超过容器宽度，则隐藏部分选项，并将这些选项添加到下拉菜单中；否则，所有选项直接在容器内显示。
以下是一个简化的JavaScript代码示例，演示了核心逻辑：
// 实际应用中，需动态获取元素宽度
const ITEM_WIDTH = 50;
const CONTAINER_WIDTH = 200;
const menus = ['元素', '控制台', '来源', '网络', '时间线'];
const menuObj = menus.reduce((acc, curr) => {
const visibleTotalWidth = acc.visibleMenus.length * ITEM_WIDTH;
const nextVisibleTotalWidth = visibleTotalWidth + ITEM_WIDTH;
if (nextVisibleTotalWidth > CONTAINER_WIDTH) {
acc.extraMenus.push(curr);
} else {
acc.visibleMenus.push(curr);
}
return acc;
}, { visibleMenus: [], extraMenus: [] });
console.log('menuObj', menuObj);
// 输出结果将显示 visibleMenus 和 extraMenus 数组
这段代码使用reduce函数迭代菜单项，计算已显示选项的总宽度。如果超过容器宽度，则将剩余选项添加到extraMenus数组（用于下拉菜单）；否则添加到visibleMenus数组（直接显示）。
实际应用中，需要结合DOM操作，将visibleMenus和extraMenus分别渲染到页面上。 需要注意的是，示例代码中宽度是预设的，实际应用需要动态获取元素的实际宽度，以确保计算的准确性。 这可以通过JavaScript的offsetWidth属性实现。
