谷歌加上喜欢的菜单不适合重新调整大小

Question

我的菜单灵感来自这个问题Creating a menu similar to Google Plus。它基于https://stackoverflow.com/a/16843635/1004312和这个小提琴的答案：http://jsfiddle.net/CTAKR/使用了一个选择菜单。  我已经更新了我的样式和列表项。它似乎工作正常，但菜单只能在加载时使用，而不是重新调整尺寸，我无法弄清楚：

注意它是如何仅在加载时起作用的，因此将窗口的大小调整得更窄，然后刷新，然后它会起作用，否则它不起作用：

http://jsbin.com/hogad/1/ - 没有处理调整大小

问题：如何使这项工作也调整大小。

此处使用固定版本更新：http://jsbin.com/zijot/1/edit

错误的jQuery：

// Reference: https://stackoverflow.com/a/16843635/1004312 

// http://jsfiddle.net/CTAKR/ -- inspiration

var items = [{
    text: "Home",
    link: "#"
}, {
    text: "Books",
    link: "#books"
}, {
    text: "Blog",
    link: "#blog"
}, {
    text: "About Us",
    link: "#about"
}, {
    text: "Long Title Goes Here",
    link: "#support"
}, {
    text: "Support2",
    link: "#support"
}, {
    text: "Support3",
    link: "#support"
}];



function buildMenu() {
    var i, item, prevElem,
        listMenu = "", //? what is this for?
        selectMenu = ""; //? what is this for?

    $("#nav").html('').append('<ul class="navigation"></ul><ul class="more-menu"><li class="has-children"><a href="#">More</a><ul></ul></li></ul>');

    $('.more-menu ul').append('<li><a href="link.html">Gallery</a></li><li><a href="link.html">Contact</a></li>');

    for (i = 0; i < items.length; i++) {
        item = items[i];
        var pW = prevElem ? prevElem.outerWidth() : 0;
        var mW = $('.more-menu').outerWidth() + $('.navigation').outerWidth();
        if (mW + pW + 50 >= $('.menu-container').innerWidth()) {
            $('.more-menu ul').append('<li><a href="' + item.link + '">' + item.text + '</a></li>');
        } else {
            prevElem = $('<li><a href="' + item.link + '">' + item.text + '</a></li>').appendTo('.navigation');
        }
        if ($('.more-menu ul li').length < 1) {
            $('.more-menu').hide();
        } else {
            $('.more-menu').show();
        }
    }
}


/* the problem is that it's not working on resize */
$(document).ready(function(e) {
    buildMenu();
    $(window).resize(function(e) {
        buildMenu();
    });
});

// Toggle the UL UL
$(document).ready(function() {
    $(".has-children a").click(function() {
        // $(this).next('ul').toggleClass("open");
        $(this).parent('li').toggleClass("open-menu");
    });
});

// Hide when clicked/tapped outside 
$(document).on('touchstart click', function(event){
    if(!$(event.target).closest('.menu-container').length) {
        if($('.menu-container ul ul').is(":visible")) {
            $('.has-children').removeClass("open-menu");
        }
    }        
});

HTML：

<div class="menu-container">
<nav id="nav"><!--menu draws here --></div>
</nav>  

CSS：

.menu-container {
    max-width: 900px;
    margin: 0 auto;
}

#nav {
    display: block;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
    font-size: 0px; /*remove spacing */
}

#nav ul {
    list-style: none;
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    position: relative;
}

#nav > ul > li {
    margin-right: 2px
}

#nav > ul li a {
    display: inline-block;
    background: #2C3C53;
    color: #fff;
    padding: 0 20px;
    line-height: 50px;
    text-decoration: none;
}

#nav a:hover,
#nav .open-menu > a {
    background: red
}

#nav .more-menu ul {
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: 54px;
    opacity: 0;
    right: 0;
    text-align: left;
    transition: opacity .5s ease-in-out;
}

#nav .open-menu ul {
    height: auto;
    overflow: visible;
    opacity: 1;
}

.more-menu ul li {
    display: block
}

.more-menu ul li:not(:last-child) {
    margin-bottom: 2px
}

#nav .more-menu ul a {
    display: block;
    line-height: normal;
    padding: 10px 20px;
    width: 100%;
    min-width: 10em;
}

.has-children > a:after {
    font-family: 'FontAwesome';
    content: "\f067";
    position: relative;
    display: inline;
    line-height: 1;
    font-size: 10px;
    padding-left: 10px;
    top:-1px;
}

.has-children.open-menu > a:after { content: "\f068" }

Answer 1

我相信您的问题是More导航没有显示其子项，因为您动态生成导航..因此，您必须使用事件委派为您的点击功能如下：

$(document).ready(function() {
    $("body").on('click','.has-children a',function() {
        // $(this).next('ul').toggleClass("open");
        $(this).parent('li').toggleClass("open-menu");
    });
});