div 元素存在于开发工具中但在屏幕上不可见

Question

我正在尝试克隆一个用于学习目的的网站，W3CSS and plain javascript. Here 是我已经创建的内容。我的问题是，在小屏幕上单击汉堡包图标后，在屏幕上看不到 ID 为 #menu 的 div，但是，它出现在 chrome 的开发工具中，并且当它被切换。我已经检查了 css 中的很多东西，比如 display:、z-index:、background-color:、overflow:，无论如何，甚至试图用 js 打印一些东西到控制台计算风格和诸如此类的东西，但没有任何东西让我找到任何解决方案。当我在我的手机 phone 和 chrome 上检查上面的笔时，切换按钮（带有汉堡图标的那个）没有位于菜单栏的中间，当点击它时，打开下拉菜单，第一个菜单项变得可见（实际上 <a> 元素的顶部恰好适合顶部导航栏）。我也会在这里 post 完整的 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 而您正在那里使用它。另外，还有一个就是，你的字体都是白色的，白底的，你什么都看不到。

从 <nav> 中删除 w3-bar。
为 #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>

预览

div 元素存在于开发工具中但在屏幕上不可见

div element present in devtools but not visible on screen

html

javascript

css

w3.css