Google Plus like menu not working on re-size

问题

I have this menu inspired by this question Creating a menu similar to Google Plus. It is based on the answer from https://stackoverflow.com/a/16843635/1004312 and this fiddle: http://jsfiddle.net/CTAKR/ which uses a select menu. I have updated with my styles and list items. It appears to work fine but the menu only works on load, not on re-size and I can't figure it out:

Notice how it only works on load, so size the window more narrow, then refresh, then it will work, otherwise it doesn't work:

http://jsbin.com/hogad/1/ -- not working on resize

Question: How to make this work on resize too.

This is updated with the fixed version here: http://jsbin.com/zijot/1/edit

WRONG 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" }

回答1:

I believe your problem is that the More navigation didn't show its children, its because you generate the navigation dynamically.. So, you have to use event delegation for your click function like this:

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

来源：https://stackoverflow.com/questions/25236532/google-plus-like-menu-not-working-on-re-size