【问题标题】：Menu item is not shown (width of variable is miscalculated)菜单项未显示（变量宽度计算错误）
【发布时间】：2015-10-25 15:46:35
【问题描述】：

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

http://codepen.io/lukejacksonn/pen/PwmwWV

问题

当页面最初加载到 ~1125px* 时，不知何故 var availableSpace 被计算错误，隐藏了最后一个菜单项并显示了汉堡按钮：

当您使浏览器窗口变宽直到汉堡按钮消失，然后再次变窄到 ~1125 像素时，var availableSpace 计算正确并显示最后一个菜单项：

问题

我如何计算var availableSpace 以便（当有足够的空间容纳菜单中的最后一项时）显示最后一个菜单项而不是菜单按钮？

* 我在浏览器窗口中以 1125 像素宽度制作了以下屏幕截图，但宽度可能会根据菜单项的数量和菜单项的长度而有所不同。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

更新：在JS代码面板中，在function 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] ){

到

  if(availableSpace > breaks[breaks.length-1] || $(window).width() > hMenuTotalWidth){

codepen：http://codepen.io/anon/pen/YyaZRJ

希望现在可以使用

【讨论】：

感谢您的回复。 :) 虽然它并没有解决我的问题。我将在多语言网站上使用菜单，其中菜单项的数量和菜单项内标签的长度变化很大，所以我无法设置像< 1125 这样的固定数字。解决方案应灵活并随内容扩展。
@Bueno，我已经更新了代码，检查一下，我希望它现在可以工作。
再次感谢，非常感谢您的帮助。我检查了你的 codepen，不幸的是它似乎不起作用。我也在自己的代码中尝试过，但无济于事。加载页面时，该按钮仍会替换最后一个菜单项。
@Bueno，你的意思是除了页面第一次加载它工作正常并且你重新调整窗口大小的时候？
@Bueno，你是对的，但它只需要一点修复，只需添加这个updateNav(); 来完成这项工作.. 上面的代码已更新