Google Plus之类的菜单无法调整大小 [英] Google Plus like menu not working on re-size

问题描述

我的菜单受此问题启发创建类似于Google Plus的菜单.它基于 https://stackoverflow.com/a/16843635/1004312 的答案以及以下提示: http://jsfiddle.net/CTAKR/. 我已经更新了样式和列表项.看起来工作正常，但菜单仅在加载时有效，而在调整大小时不起作用，我无法弄清楚:

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:

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

问题:如何在调整大小时也能做到这一点.

错误的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" }

推荐答案

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

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

这篇关于Google Plus之类的菜单无法调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！