移動下拉菜單切換為“有效”，但始終不可見

Question

我正在嘗試創建一個非常基本的移動下拉菜單，該菜單會在單擊時展開，以顯示該代碼筆投資組合頁面項目“免費代碼營”的右上角導航。 菜單從不顯示，但是當我檢查該元素時，似乎javascript函數實際上正在運行，並且將“ show” CSS類添加到了mobileNavDrop div中並從中移除。

不可見的菜單似乎也位於應該位於的頁面上，如使用檢查元素工具的此屏幕截圖所示：

使用檢查元素工具突出顯示了不可見的下拉菜單

我嘗試使用z-index一直將其向前推進，並使橫幅不可見，以查看其是否藏在事物的后面，但事實並非如此。 我什至嘗試僅使菜單開始可見，而不是“ display：none;”。 而且它仍然沒有顯示在頁面上。

我在其他地方得到的建議是僅使用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

您可能沒有看到該圖標，因為您尚未為該圖標包括fa.A fa fa-bars （ 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">

或下載並安裝本地副本。

Answer 2

你需要：

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

另外，請確保該nav欄的每個容器中都可見溢出，但該容器的大小可能不足以包含下拉菜單。

Answer 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語句，以便它來回切換。 您的陳述僅刪除“顯示”，而不會將其重新添加。

移動下拉菜單切換為“有效”，但始終不可見

問題描述

3 個解決方案

解決方案1
0 2017-03-03 19:48:55

解決方案2
0 已采納

解決方案3
0 2017-03-03 20:29:42

移動下拉菜單切換為“有效”，但始終不可見

問題描述

3 個解決方案

解決方案1 0 2017-03-03 19:48:55

解決方案2 0 已采納

解決方案3 0 2017-03-03 20:29:42

解決方案1
0 2017-03-03 19:48:55

解決方案2
0 已采納

解決方案3
0 2017-03-03 20:29:42