Question

我正在尝试创建一个非常基本的移动下拉菜单，该菜单会针对this codepen portfolio page project for Free Code Camp.的右上导航进行扩展。菜单永远不会显示，但是当我检查元素时，它看起来像javascript函数实际上正在工作，使用＆＃34; show＆＃34;将CSS类添加到mobileNavDrop div。

隐形菜单似乎也位于其应该位于的页面上，如使用inspect element工具在此屏幕截图中所示：

Invisible drop-down menu highlighted with inspect element tool

我尝试用z-index向前推动它，让横幅看不见，看看它是否隐藏在事物后面，但它不是。我甚至尝试将菜单开始显示为可见而不是使用＆＃34; display：none;＆＃34;它仍然没有显示在页面上。

我在其他地方获得的建议是使用jquery和bootstrap，但我希望通过尝试从头开始编写所有内容来更好地理解事物。因此，我为响应式布局编写的内容是否可能存在冲突？

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

HTML

setAttribute

CSS

textarea[readonly] {background-color:#F0F0F0;})

JS

<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>

Answer 1

您可能没有看到该图标，因为您没有为图标fa fa-bars添加FontAwesome库。

尝试将此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">

或下载并安装本地副本。

Answer 2

你需要：

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

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

Answer 3

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在你的javascript中。我添加了一个else语句，所以它来回切换。您的陈述只会删除＆＃39; show＆＃39;但不会加回来。

移动下拉菜单切换＆＃34;工作＆＃34;但从未见过

3 个答案: