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行左右提供的小提琴中，您有以下内容：

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

它表示高度为80px。因此，div从未达到其最大高度约205px。

下拉菜单未列出所有项目

1 个答案: