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> 

预习