Question

＆＃13;

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul class="topnav" id="myTopnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

</body>
</html>

＆＃13;

{{1}}

＆＃13;

在屏幕尺寸小于600px的代码中，主页选项卡保留，剩下的应该通过汉堡包图标显示，该图标应显示在右上角但不起作用。我做错了什么？我应该做些什么改变才能使它发挥作用？请帮忙

Answer 1

虽然其他答案使用您当前的代码提供了一个解决方案，但我会为很多事情推荐一种不同的方法......

不引人注目的JS对于更好的SoC（分离关注点）很重要。使用Database.database().reference().observeSingleEvent(of: .value, with: { //Invalid conversion from throwing function of type '(_) throws -> ()' to non-throwing function type '(DataSnapshot) -> Void'(rootSnapshot) in let childSnapshots = rootSnapshot.children.allObjects as! [DataSnapshot] let childValues = childSnapshots.map { $0.value as! [String: Any] } for value in childValues { do { let gasUse = try GasUse(from: value) } catch SerializationError.missing { self.present(self.makeAlert("Error", "Missing value in json"), animated: true, completion: nil) } catch SerializationError.invalid { self.present(self.makeAlert("Error", "Invalid value in json"), animated: true, completion: nil) } } })方法将其保留在HTML /全局范围之外，并且可选地，使用IIFE
CSS应采取更多移动优先方法。
addEventListener()几乎总是伴随着:hover。使用Tab键从控件跳转到控件，您就会明白为什么。并非所有人都使用鼠标。
HTML可能应该利用HTML5语义
这不太重要，但我仍会展示＆＃34; Home＆＃34;链接。
更新：此外，use the proper heading level（h2不是最高级别）

＆＃13;

:focus

＆＃13;

(function() {
  'use strict';

  var headerEl = document.querySelector('body > header');
  var btnEl = document.querySelector('.menu-btn');

  if(btnEl && headerEl) {
    btnEl.addEventListener('click', function() {
      headerEl.classList.toggle('open');
    });
  }
})();

＆＃13;

.page-header {
  background-color: #333;
  color: #f2f2f2;
  overflow: hidden;
}

.page-header a { display: block; }

.page-header a,
.menu-btn {
  color: inherit;
  text-decoration: none;
  font-size: 17px;
  padding: 14px 16px;
}

button.menu-btn {
  border: none;
  background: none;
  cursor: pointer;
}

.page-header a:hover,
.page-header a:focus,
.menu-btn:hover,
.menu-btn:focus {
  background-color: #ddd;
  color: black;
  outline: none;
}	

.page-header:not(.open) a { display:none; }
.menu-btn { float: right; }

@media(min-width: 768px) {
  .page-header.page-header a { display: inline-block; }
  .menu-btn { display: none; }
}

＆＃13;

Answer 2

主要问题是，当您转到小状态时隐藏元素，但在添加.responsive类时不显示它们。我在这里为你做了一些更新：

https://jsfiddle.net/9xxzsypu/

.topnav.responsive li.item:not(:first-child) { display: block!important; }

Answer 3

在您的第一个媒体查询中尝试此操作：

@media screen and (max-width: 600px) {
    .topnav li:not(:first-child):not(:last-child) {
         display: none;
    }
}

您基本上将.topnav中的每个列表项设置为display：none，除了第一个。这使得汉堡包菜单也不可见。

滑出导航无法正常工作

3 个答案: