Question

当前正在尝试实施w3schools响应式导航栏，网址为https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

它有些起作用，但是在小屏幕上，没有出现下拉菜单。而是，列表上的最后一项在其位置。我不确定发生了什么，但是我觉得我缺少一个关键方面。下面的代码，任何建议，不胜感激！

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

  .nav {
  position: fixed;
  background-color: #efefef;
  border-bottom: 1px solid #dbdbdb;
  width: 100%;
  height: calc(20px + .2vw);
  top: 0;
  opacity: 1.0;
  z-index: 10000000;
}

.nav a {
  color: #5a5a5a;
  font-size: calc(7.75px + .25vw);
  font-weight: bold;
  padding: 10px 10px;
  text-transform: uppercase;
}

.nav a:hover {
  background: #e1e1e1;
  color: black;
}

.nav li {
  display: inline;
}

.nav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    float: right;
    display: block;
  }
}

@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;
  }

<div class="nav" id="mynav">
  <div class="container">
    <ul class='pull-left'>
      <a href="#home" class="active">Home</a>
      <a href="#news">Tools</a>
    </ul>
    <ul class="pull-right">
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

Answer 1

将此链接添加到头部

1;2;3;4 // {1;2;3;4} each will not be excepted as numbers in the calculations

{={1;2;3;4}]} with String+Shift+Enter will be handled like a single number as well.

(1;2;3;4) // =1; 2; 3; 4 // =(1;2;3;4) each result in an error on input ("not a formula")

导航栏下拉菜单没有出现

1 个答案: