谷歌加上喜欢的菜单不适合重新resize

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

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

http://jsbin.com/hogad/1/ – 没有处理resize

问题：如何使这项工作也resize。

这是使用固定版本更新的： 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('
More
'); $('.more-menu ul').append('
Gallery
Contact
'); for (i = 0; i = $('.menu-container').innerWidth()) { $('.more-menu ul').append('
' + item.text + '
'); } else { prevElem = $('
' + item.text + '
').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：

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导航没有显示它的孩子，因为你动态生成导航..所以，你必须使用事件委托为你的点击function，如下所示：

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