javascript - 响应式 jQuery 菜单，将最后一个元素折叠到单独的菜单中

Question

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

在图像表示下方：

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();
            });

然而，这并没有按预期工作并且只完成了一半。我觉得我正朝着错误的方向前进。

编辑：这是更新的 jsFiddle： http: //jsfiddle.net/anteksiler/zyv8f/1/调整浏览器大小以获得效果。