Javascript 响应jQuery菜单，将最后的元素折叠到单独的菜单中

我有一个单级导航列表。我想做的是，在调整窗口大小时，在末尾添加一个下拉列表，以显示不适合窗口宽度的元素

在图像表示下面：

var base = this,
                    container = $(base.selector),
                    items = container.find('>li:not(.smallmenu):visible'),
                    count = container.find('>li:not(.smallmenu):visible').length,
                    listWidth = [],
                    added;

            items.each(function() {
                listWidth.push($(this).width());
            });

            function getWidth() {
                var width = 0;
                container.find('>li:not(.smallmenu):visible').each(function() {
                    width += $(this).outerWidth();
                });
                return width + 100;
            }
            function hideLast() {
                var i = container.find('>li:not(.smallmenu):visible').last().index()

                if( $(window).width() < (getWidth()) ) {
                    items.eq(i).hide();

                    if(!added) {
                        $('<li class="smallmenu"><a href="#"><i class="fa fa-plus"></i></a></li>').appendTo(container);
                        added = true;
                    }
                }
            }
            function showLast() {
                var i = container.find('>li:not(.smallmenu):visible').last().index();
                if( (getWidth() + listWidth[i+1]) < $(window).width() ) {
                    container.find('>li:not(.smallmenu)').eq(i+1).show();

                    if((i+2) === count) {
                        container.find('.smallmenu').remove();
                        added = false;
                    }
                }
            }
            $(window).resize(function() {
                showLast();
                hideLast();
            });

var base=this，
容器=$（base.selector），
items=container.find（'>li:not（.smallmenu）：visible'），
count=container.find（'>li:not（.smallmenu）：visible'）。长度，
listWidth=[]，
补充；
项。每个（函数（）{
listWidth.push（$（this.width（））；
});
函数getWidth（）{
var宽度=0；
container.find（'>li:not（.smallmenu）：visible'）.each（function（）{
宽度+=$（this）.outerWidth（）；
});
返回宽度+100；
}
函数hideLast（）{
var i=container.find（'>li:not（.smallmenu）：visible'）.last（）.index（）
如果（$（窗口）.width（）<（getWidth（））{
items.eq（i）.hide（）；
如果（！已添加）{
$（'li class=“smallmenu”>）.appendTo（容器）；
添加=真；
}
}
}
函数showLast（）{
var i=container.find（'>li:not（.smallmenu）：visible'）.last（）.index（）；
if（（getWidth（）+listWidth[i+1]）<$（window.width（））{
container.find（'>li:not（.smallmenu））.eq（i+1）.show（）；
如果（（i+2）==计数）{
container.find（'.smallmenu'）.remove（）；
添加=错误；
}
}
}
$（窗口）。调整大小（函数（）{
showLast（）；
hideLast（）；
});

然而，这并没有像预期的那样起作用，已经完成了一半。我觉得我走错了方向

---

编辑：这是一个更新的JSFIDLE：调整浏览器大小以获得效果。

作为获得更多答案的建议：尝试创建一个或类似的工具，人们可以在这里玩，而无需设置所有的Stufhi@fguillen，这是一个更新的JSFIDLE：