响应式导航栏失败答案

【问题标题】：Failed responsive navbar响应式导航栏失败
【发布时间】：2018-08-12 15:23:02
【问题描述】：

我有一个导航栏，当屏幕小于 900 像素时，我希望它只有第一个元素 Wakanda Team 和一个汉堡图标。但我不断让其他元素出现在图片中。有人可以帮忙吗？

HTML：

 <ul class="topnav" id="myTopnav">
    <li style="float:left"><a href="#home" class="home">Wakanda Team</a></li>
    <li><a><i class="material-icons">subdirectory_arrow_left</i> Sign out</a></li>
    <li><a><i class="material-icons">exit_to_app</i> Sign in</a></li>
    <li><a><i class="material-icons">person_add</i> Register</a></li>
    <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></li>
  </ul>
      <p>Welcome to <%= title %></p>
  <script>
      function myFunction() {
          var x = document.getElementById("myTopnav");
          if (x.className === "topnav") {
              x.className += " responsive";
          } else {
              x.className = "topnav";
          }
      }
  </script>

CSS：

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: right;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.home){
    background-color: #111;
    text-decoration: none;
    color: white;
}

li a .home:hover{
    text-decoration: none;
}

.material-icons {
    vertical-align: middle;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 900px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

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

【问题讨论】：

This: .topnav a:not(:first-child) {display: none;} “a”标签总是第一个孩子，因为它被包裹在一个“li”中。所以它是包装器中的第一个孩子。如果你想这样做，它必须像： .topnav li:not(:first-child) a {display: none;} 还要在下一行添加“li”，这样它就会覆盖它。像这样：.topnav li a.icon..

标签： html css responsive-design navbar

【解决方案1】：

试试这个

function myFunction() {
          var x = document.getElementById("myTopnav");
          if (x.className === "topnav") {
              x.className += " responsive";
          } else {
              x.className = "topnav";
          }
      }

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: right;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.home){
    background-color: #111;
    text-decoration: none;
    color: white;
}

li a .home:hover{
    text-decoration: none;
}

.material-icons {
    vertical-align: middle;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 900px) {
    .topnav li:not(:first-child) {
		display: none;
	}
	.topnav li.icon {
		display: block;
	}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

<ul class="topnav" id="myTopnav">
    <li style="float:left"><a href="#home" class="home">Wakanda Team</a></li>
    <li><a><i class="material-icons">subdirectory_arrow_left</i> Sign out</a></li>
    <li><a><i class="material-icons">exit_to_app</i> Sign in</a></li>
    <li><a><i class="material-icons">person_add</i> Register</a></li>
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a></li>
  </ul>
      <p>Welcome to <%= title %></p>

【讨论】：

谢谢，Anzil，汉堡确实出现了，但是当我点击它时，什么也没有发生。 p 标签也没有出现。运行代码 sn -p 也可以看到。