移动下拉菜单切换“工作”但从不可见答案

【问题标题】：Mobile drop-down menu toggle "working" but never visible移动下拉菜单切换“工作”但从不可见
【发布时间】：2017-03-04 04:35:28
【问题描述】：

我正在尝试创建一个非常基本的移动下拉菜单，单击该菜单会扩展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;
}

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

【问题讨论】：

标签： javascript html css drop-down-menu

【解决方案1】：

你需要：

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

另外，请确保在nav 的每个容器中都可以看到溢出，该容器可能不够大，无法包含下拉菜单。

【讨论】：

非常感谢，它的父行和容器的溢出可见性正在做这件事。他们都默认隐藏了它，需要在这种情况下被覆盖。

【解决方案2】：

您可能没有看到该图标，因为您没有包含图标的 FontAwesome 库 (fa fa-bars)。

尝试将此 CDN 引用添加到您的 <head>：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

或下载并安装本地副本。

【讨论】：

【解决方案3】：

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');
            }else
            {
                openDropdown.classList.contains('show');
            }
        }
    }
};

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

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

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

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

.show {
    display: block;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-navbar'>
    <div class='navbar'>

        <div class='row'>
            <div class='col-sm-4 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-4 col-md-3'>
                <div class='mobile-nav'>
                    <div onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></div>
                    <div id='mobileNavDrop' class='mobile-nav-drop hide'>
                        <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>

在您的 javascript 中。我添加了一个 else 语句，所以它来回切换。您的语句仅删除了“显示”，但没有将其添加回来。

【讨论】：

我希望这是您所要求的一部分，而不仅仅是因为缺少图标。为了指出这一点，我将图标更改为 div 并将其设置为深灰色以查看它。有 2 件事正在发生。 1.图标不可见 - 请参阅解决方案的其他答案。 2. 类'show'被移除但没有放回。这仅意味着元素保持显示：无；