javascript - 移动下拉菜单切换 "working"但从不可见

Question

我正在尝试创建一个非常基本的移动下拉菜单，该菜单在点击 this codepen portfolio page project for Free Code Camp. 右上角的导航栏时展开。菜单从未出现，但当我检查元素时，javascript 函数似乎确实在工作，“show”CSS 类被添加到 mobileNavDrop div 中并从中删除。

不可见的菜单似乎也位于页面上它应该位于的位置，如使用检查元素工具在该屏幕截图中所见:

Invisible drop-down menu highlighted with inspect element tool

我试过使用 z-index 将它一直向前推，并使横幅不可见，以查看它是否隐藏在东西后面，但事实并非如此。我什至尝试让菜单开始时可见，而不是“显示:无；”它仍然没有显示在页面上。

我从其他地方得到的建议是只使用 jquery 和 bootstrap，但我希望通过尝试从头开始编写所有内容来了解​​更多内容。所以我为响应式布局写的东西可能有冲突吗？

这里至少是我认为相关的代码部分。谢谢!

HTML

<div class='container-navbar'>
    <div class='navbar'>

        <div class='row'>
            <div class='col-sm-2 col-md-1'>
                <ul class='nav-left'>
                    <li class='header-button'><a href='http://www.freecodecamp.com/davallerr' target='_blank'>davallerr</a></li>
                </ul>
            </div>
            <div class='col-sm-2 col-md-3'>
                <div class='mobile-nav'>
                    <i onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></i>
                    <div id='mobileNavDrop' class='mobile-nav-drop'>
                        <a href='#about'>about</a>
                        <a href='#portfolio'>the work</a>
                        <a href='#contact'>contact</a>
                    </div>
                </div>
                <ul class='nav-right'>
                    <li><a href='#about'>about</a></li>
                    <li><a href='#portfolio'>the work</a></li>
                    <li><a href='#contact'>contact</a></li>
                </ul>
            </div>
        </div>

    </div>
</div>

CSS

.mobile-nav-icon {
    padding: 1.25em;
}

.mobile-nav-icon:hover, .mobile-nav-icon:focus {
    background: #40514f;
    color: #fff;
}

.mobile-nav {
    position: relative;
    display: inline-block;
    float: right;
    overflow: visible;
}

.mobile-nav-drop {
    display: none;
    position: absolute;
    right: 0;
    background: #ccc;
    min-width: 10em;
    box-shadow: 0 0 .25em 0 rgba(0,0,0,.2);
}

.show {
    display: block;
}

.mobile-nav-drop a {
    color: #000;
    padding: 1em;
    display: block;
}

.mobile-nav-drop a:hover {
    background: #aaa;
}

JS

function mobileNavDrop() {
    document.getElementById('mobileNavDrop').classList.toggle('show');
}

window.onclick = function(event) {
    if (!event.target.matches('.mobile-nav-icon')) {
        var dropdowns = document.getElementsByClassName('mobile-nav-drop');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

Answer 1

你需要:

.show {
    display: block;
    position: absolute; /* add this line, */
    top: 0; /* and this one */
}

另外，确保溢出在 nav 的每个容器中都可见，因为它可能不够大，无法包含下拉菜单。