devtools中存在div元素，但在屏幕上不可見

Question

我正在嘗試使用W3CSS和純JavaScript克隆一個網站以供學習。 這是我已經創建的東西。 我的問題是，單擊小屏幕上的漢堡圖標后，ID為#menu的div在屏幕上不可見，但是在切換時，它在chrome和ff的devtools中存在。 我已經檢查了css中的很多東西，例如display: ， z-index: ， background-color: ， overflow:等等，甚至嘗試用js打印有關計算樣式和其他內容的東西，但是沒有什么導致我找到任何解決方案。 當我用鉻檢查手機上的上述筆時，切換按鈕（帶有漢堡圖標的按鈕）未位於菜單欄的中間，並且單擊它以打開下拉菜單時，第一個菜單項變為可見（實際上是<a>元素的頂部，恰好適合頂部導航欄）。 我也將在此處發布完整的html && css && js代碼，此為令人討厭的紅色感嘆號。

html

 function toggleMenu() { let toggler = document.getElementById('menu-toggler'); let menu = document.getElementById(toggler.dataset.menu); if (hasClass(menu, 'w3-hide-small')) { rmClass(menu, 'w3-hide-small'); console.log(window.getComputedStyle(menu).backgroundColor); let children = menu.childNodes; let height = 0; for (let child of children) { if (child instanceof Element) { height += child.offsetHeight; } } menu.style.height = height + 'px'; } else { menu.style.height = ''; // 500 is the length of the transition window.setTimeout(() => { addClass(menu, 'w3-hide-small'); }, 500); } } function hasClass(elem, cl) { if (elem.className.includes(cl)) { return true; } return false; } function addClass(elem, cl) { if (!hasClass(elem, cl)) { elem.className += ' ' + cl; } } function rmClass(elem, cl) { if (hasClass(elem, cl)) { elem.className = elem.className.replace(' ' + cl, ''); } } 

 .w3-hover-flat-emerald:hover { color: #fff; background-color: #2ecc71 !important; } nav { height: 80px; } nav .w3-hide-small a { height: 80px; line-height: 64px; } nav .w3-hide-small a:hover { color: #2ecc71 !important; background-color: transparent !important; } nav img { height: 80px; } nav .w3-content { position: relative; } nav button { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } #menu { transition: height 0.5s linear 0.1s; overflow: hidden; } @media screen and (max-width: 600px) { #menu { height: 0; } nav .w3-hide-small a { height: auto; } } 

 <!doctype html> <html> <head> <title>copy_lesson</title> <meta name="viewport" content="width=device-width, intial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css"> <link rel="stylesheet" href="../w3.css/w3-colors-flat.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="style/css/main.css"> </head> <body> <nav class="w3-bar w3-camo-black w3-xlarge"> <div class="w3-content"> <a href="#"> <img class="w3-padding" src="http://www.hhtrans.sk/img/logo.png" alt="logo"> </a> <button onclick="toggleMenu()" id="menu-toggler" data-menu="menu" type="button" class="w3-hover-flat-emerald w3-margin-right w3-button w3-hide-medium w3-hide-large w3-right"> <i class="fas fa-bars"></i> </button> <div id="menu" class="w3-mobile w3-right w3-hide-small w3-large"> <a href="#" class="w3-button w3-bar-item w3-mobile">Home</a> <a href="#" class="w3-button w3-bar-item w3-mobile">About</a> <a href="#" class="w3-button w3-bar-item w3-mobile">Contacts</a> </div> </div> </nav> <script src="style/js/main.js"></script> </body> </html> 

任何將不勝感激。 提前致謝 ：）

Answer 1

問題在於此.w3-bar有overflow: hidden ，您正在那里使用它。 另外，另一件事是，您的字體全為白色，因此在白色背景下，您將看不到任何內容。

1. 從<nav>移除w3-bar 。
2. 在#menu添加一些背景色。

片段

 function toggleMenu() { let toggler = document.getElementById('menu-toggler'); let menu = document.getElementById(toggler.dataset.menu); if (hasClass(menu, 'w3-hide-small')) { rmClass(menu, 'w3-hide-small'); console.log(window.getComputedStyle(menu).backgroundColor); let children = menu.childNodes; let height = 0; for (let child of children) { if (child instanceof Element) { height += child.offsetHeight; } } menu.style.height = height + 'px'; } else { menu.style.height = ''; // 500 is the length of the transition window.setTimeout(() => { addClass(menu, 'w3-hide-small'); }, 500); } } function hasClass(elem, cl) { if (elem.className.includes(cl)) { return true; } return false; } function addClass(elem, cl) { if (!hasClass(elem, cl)) { elem.className += ' ' + cl; } } function rmClass(elem, cl) { if (hasClass(elem, cl)) { elem.className = elem.className.replace(' ' + cl, ''); } } 

 .w3-hover-flat-emerald:hover { color: #fff; background-color: #2ecc71 !important; } nav { height: 80px; } nav .w3-hide-small a { height: 80px; line-height: 64px; } nav .w3-hide-small a:hover { color: #2ecc71 !important; background-color: transparent !important; } nav img { height: 80px; } nav .w3-content { position: relative; } nav button { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } #menu { transition: height 0.5s linear 0.1s; overflow: hidden; } @media screen and (max-width: 600px) { #menu { height: 0; background: #333; } nav .w3-hide-small a { height: auto; } } 

 <!doctype html> <html> <head> <title>copy_lesson</title> <meta name="viewport" content="width=device-width, intial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css"> <link rel="stylesheet" href="../w3.css/w3-colors-flat.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="style/css/main.css"> </head> <body> <nav class="w3-camo-black w3-xlarge"> <div class="w3-content"> <a href="#"> <img class="w3-padding" src="http://www.hhtrans.sk/img/logo.png" alt="logo"> </a> <button onclick="toggleMenu()" id="menu-toggler" data-menu="menu" type="button" class="w3-hover-flat-emerald w3-margin-right w3-button w3-hide-medium w3-hide-large w3-right"> <i class="fas fa-bars"></i> </button> <div id="menu" class="w3-mobile w3-right w3-hide-small w3-large"> <a href="#" class="w3-button w3-bar-item w3-mobile">Home</a> <a href="#" class="w3-button w3-bar-item w3-mobile">About</a> <a href="#" class="w3-button w3-bar-item w3-mobile">Contacts</a> </div> </div> </nav> <script src="style/js/main.js"></script> </body> </html> 

預習