如何在移动视图中隐藏一些导航链接？答案

【问题标题】：How can I hide some navigation links in mobile view?如何在移动视图中隐藏一些导航链接？
【发布时间】：2019-02-27 03:08:31
【问题描述】：

我从w3schools 复制了这个菜单。我已经编辑了一些东西（将三个链接浮动到右侧，并更改了一些颜色）。

桌面视图：

手机端查看：

但是，您可以看到项目链接显示在移动视图中，这不是我想要的。如何禁用该项目链接？我已经在 CSS 中尝试过一些类似的东西：:not(:first-child)。

这是我的代码：

function jsnav() {
  var x = document.getElementById("js-nav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
    x.className = "nav";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: "helvetica neue", sans-serif;
}

nav {
  overflow: hidden;
  background-color: #333;
}

nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  color: white;
}

.active {
  background-color: dodgerblue;
  color: white;
}

nav .icon {
  display: none;
}

.float-right {
  float: right;
}

@media screen and (max-width: 600px) {
  nav a:not(:first-child) {display: none;}
  nav a.icon {
    float: right;
    display: block;
    padding-top: 10px;
  }
  .float-right {
    float: left;
  }
}

@media screen and (max-width: 600px) {
  nav.responsive {position: relative;}
  nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

main {
  padding: 40px 40px 20px 80px;
}

@media only screen and (max-width: 800px){
  main {
    padding-left: 40px;
    padding-right: 40px;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS -->
  <link rel="stylesheet" href="css/style.css">
  <title>CSS Nav HTML &amp; CSS JS</title>
</head>
<body>


  <nav id="js-nav">
    <a href="#" class="active">Home</a>
    <div class="float-right">
      <a href="#">Projects</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
    <a href="javascript:void(0);" class="icon" onclick="jsnav()">
      &#9776;
    </a>
  </nav>

<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>

<script src="js/navigation.js"></script>

</body>
</html>

【问题讨论】：

所以你想隐藏那个项目链接？所以float-right 的所有链接都应该被隐藏？
是的，这是正确的，只有当汉堡按钮被触摸时，浮动右链接应该是可见的

标签： javascript html css css-selectors

【解决方案1】：

我不会详细说明为什么使用float 是一种不好的布局做法。您应该研究其他解决方案，例如著名且广泛使用的 flexbox

您可以在这里阅读：MDN flexbox basics 或其他网站。

那么，回到你的问题。一个解决方案是将它们全部隐藏.float-right a { display: none }，然后在需要时再次显示它们。据我了解，nav 将有类 responsive 所以，当导航有该类时添加显示链接nav.responsive .float-right a { display: none }

function jsnav() {
  var x = document.getElementById("js-nav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
    x.className = "nav";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: "helvetica neue", sans-serif;
}

nav {
  overflow: hidden;
  background-color: #333;
}

nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  color: white;
}

.active {
  background-color: dodgerblue;
  color: white;
}

nav .icon {
  display: none;
}

.float-right {
  float: right;
}

@media screen and (max-width: 600px) {
  .float-right a{
    display: none;
  }
  nav a.icon {
    float: right;
    display: block;
    padding-top: 10px;
  }
  .float-right {
    float: left;
  }
}

@media screen and (max-width: 600px) {
  nav.responsive {
    position: relative;
  }
  nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  nav.responsive .float-right a{
    display: block;
  }
}

main {
  padding: 40px 40px 20px 80px;
}

@media only screen and (max-width: 800px) {
  main {
    padding-left: 40px;
    padding-right: 40px;
  }
}

<nav id="js-nav">
  <a href="#" class="active">Home</a>
  <div class="float-right">
    <a href="#">Projects</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="jsnav()">
      &#9776;
    </a>
</nav>

<main>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>

【讨论】：