Jquery在调整大小时将项目附加到容器

Question

我有一个内联菜单项列表，它们是响应式构建的一部分，我希望溢出列表容器的菜单项附加到另一个元素，然后在列表容器没有溢出时附加回来。 / p>

这是我能想到的最好的，而且我在这个阶段难以接受。

[小提琴] [1] [1]：http://jsfiddle.net/dirtyharry/s2bas09m/18/

var visible = false;

// Detect overflowing items
function getOverflows(){

    var listWidth = $("ul").outerWidth(); // Get list width
    var listItems = $ ("ul li"); 

    // Get child item width
    var listChildWidth = 0;
    $('ul li').each(function() {
        listChildWidth += $(this).outerWidth();
    });

    // Add dropdown menu
    function createDropdown(){
        if (listWidth < listChildWidth){
            if(!visible){
                $("ul").after("<div class='dropdown'></div>");
                visible = true;
            }
        }
    }createDropdown(); 

    $(listItems).each(function(i) {
        listCo = $(this).position();
        listItemWidth = $(this).outerWidth();
        listTotal = listCo.left + listItemWidth;
        if(listCo.left > listWidth){
            var elem = $(this).sort(sortItem);

            function sortItem(a, b) {
                return a.className > b.className;
            }

            $('.dropdown').append(elem);

        }else{
            var elem = $(".dropdown li").sort(sortItem);

            function sortItem(a, b) {
                return a.className > b.className;
            }
            $('ul').append(elem);
        }
    });       
}getOverflows();

$(window).resize(function() {    
    getOverflows();
});