Javascript 菜单项未显示（变量宽度计算错误）

我的问题是关于以下代码（不是我写的）：

问题 当页面最初以~1125px*加载时，

var availableSpace

被错误计算，隐藏了最后一个菜单项并显示汉堡按钮：

当您将浏览器窗口变宽，直到汉堡按钮消失，然后再次变窄至~1125px时，

var availableSpace

计算正确，并显示最后一个菜单项：

问题: 如何计算

var availableSpace

，以便（当有足够的空间容纳菜单中的最后一项时）显示最后一个菜单项而不是菜单按钮

*

---

我用1125像素宽的浏览器窗口做了以下截图，但宽度可能会根据菜单项的数量和菜单项的长度而变化。

更新：在JS代码面板中，就在

函数updateNav（）之前{

添加此代码以动态获取水平菜单中所有

li

元素的总宽度：

 //calculate total width of the horizontal menu
 var hMenuTotalWidth = 0;
 $('.visible-links li').each(function(){
     hMenuTotalWidth += $(this).width();
 });

 //this line calls the function to fix the bug when the first loads for the first time
 updateNav();

然后在第37行，更改此行：

if(availableSpace > breaks[breaks.length-1] ){

到

codepen:

---

希望这现在能起作用。

更新：在JS代码面板中，就在

函数updateNav（）之前{

添加此代码以动态获取水平菜单中所有

li

元素的总宽度：

 //calculate total width of the horizontal menu
 var hMenuTotalWidth = 0;
 $('.visible-links li').each(function(){
     hMenuTotalWidth += $(this).width();
 });

 //this line calls the function to fix the bug when the first loads for the first time
 updateNav();

然后在第37行，更改此行：

if(availableSpace > breaks[breaks.length-1] ){

到

codepen:

---

希望这现在能起作用

谢谢你的回复。：）但这并不能解决我的问题。我将在多语言网站上使用菜单，菜单项的数量和菜单项内标签的长度变化很大，所以我不能像

<1125

那样设置一个固定的数字。解决方案应该是灵活的，并且可以根据e内容。@Bueno，我已经更新了代码，请检查，我希望它现在能工作。再次感谢您的帮助。我检查了您的代码笔，不幸的是它似乎不工作。我也在自己的代码中尝试过，但没有用。当页面加载时，按钮仍然替换最后一个菜单项。@Bueno，您的意思是除了页面开始时以外的其他情况t加载它是否正常工作，以及您是否重新调整了窗口大小？@Bueno，您是对的，但它只是需要一点修复，只需添加此

updateNav（）；

来做这项工作。上面的代码已经更新，谢谢回复。：）但这并不能解决我的问题。我将使用多语言网站上的菜单，其中菜单项的数量和菜单项内标签的长度变化很大，所以我不能像

<1125

那样设置一个固定的数字。解决方案应该是灵活的d随内容缩放。@Bueno，我已经更新了代码，请检查，希望它现在能工作。再次感谢您的帮助。我检查了您的代码笔，但不幸的是它似乎不工作。我也在自己的代码中尝试过，但没有用。加载页面时，按钮仍然会替换最后一个菜单项。@Bueno，您的意思是除了n页面第一次加载时，它工作正常，并且您重新调整了窗口的大小？@Bueno，您是对的，但它只需要一点修改，只需添加此

updateNav（）；

即可完成此工作。.上述代码已更新