Question

我正在尝试使用W3CSS和纯JavaScript克隆一个网站以供学习。 Here是我已经创建的东西。我的问题是，单击小屏幕上的汉堡图标后，id为#menu的div在屏幕上不可见，但是，在切换时，它在chrome和ff的devtools中存在。我已经检查了诸如display:，z-index:，background-color:，overflow:之类的CSS中的所有内容，甚至尝试使用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，而您在那里使用它。另外，另一件事是，您的字体全为白色，因此在白色背景下您将看不到任何内容。

从w3-bar中删除<nav>。
为#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元素存在于devtools中，但在屏幕上不可见

1 个答案: