javascript - 下拉菜单没有列出所有元素

Question

我想制作一个带有动画的下拉菜单，但是当我打开菜单时，它只显示 2 个元素而不是 5 个

HTML

<div id="header">
<div id="logo" class="logo">
    <a id="aLogo" href="#"></a>
</div>
<div id="navigation">
    <ul>
        <li><a class="button" href="#"><span>About</span></a></li>
        <li><a class="button" href="#"><span>Examples</span></a></li>
        <li><a class="button" href="#"><span>Form</span></a></li>
        <li><a class="button" href="#"><span>Contact</span></a></li>
  </ul>

768px以内媒体的CSS

div#logo {
    width: 10%;
    float: none;
    clear: both;
    margin: 0 auto;
}
div#navigation {
    display: block;
    clear: both;
    float: none;
    margin: 0 auto;
    width: 50%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease-out;
    box-shadow: 0px 0px 5px;
}

JavaScript

function showobj() {//Slide down animation
    if (naviDiv.style.maxHeight) {
        naviDiv.style.maxHeight = null;
    } else {
        naviDiv.style.maxHeight = naviDiv.scrollHeight + "px";
    }
}
function mediaQuery(x) { //Minimize navbar if screen under 768px
    "use strict";
    if (x.matches) {
        ulNav.insertBefore(newLi, ulNav.childNodes[1]);//add Home button
        aHome.style.display = "block";
        for (var i = 0; i < logoDiv.length; i++) {
            logoDiv[i].addEventListener('click', showobj);
        }
    } else {
        for (var i = 0; i < logoDiv.length; i++) {
            logoDiv[i].removeEventListener('click', showobj);
        }
        aHome.style.display = "none";//Hide home button
    }
}
mediaQuery(x);
x.addListener(mediaQuery);

这是 jsfiddle https://jsfiddle.net/vwbo9exg/27/

Answer 1

这是您的 CSS 中的问题。在第 49-54 行附近提供的 fiddle 中，您有以下内容:

div#navigation {
    float: right;
    height: 80px; # Here is the problem
    width: 90%;
    text-align: center;
}

它声明高度为 80px。因此，div 永远不会达到 205 像素左右的最大高度。