javascript - 为什么显示 === "none"没有按预期给出结果

Question

我有一个 Javascript 函数“display()”。我如何让我的导航在点击时显示“无”，但不起作用它只是闪烁

我只想使用 javascript 让它工作。所以我没有使用查询选择器

function display() {
  var x = document.getElementById("nav-content");
  x.style.display = "none";
}

<header>
  <div class="LiaWrapper clearfix">
    <h1 id="logo">logo</h1>
    <a href="" id="drop-down-icon" onclick="display()"><i class="fa fa-bars" aria-hidden="true"></i>
            </a>
    <nav id="nav-content">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">services</a></li>
        <li><a href="">clients</a></li>
        <li><a href="">about us</a></li>
        <li><a href="">contact</a></li>
      </ul>
    </nav>
  </div>
</header>

我想让我的导航在点击时不显示，但它只是在点击时闪烁

Answer 1

发生这种情况是因为您在 <a> 上使用了 onclick href 属性为空字符串的标记。

尝试从 a 标签中删除 href 属性

<a id="drop-down-icon" onclick="display()"><i class="fa fa-bars" aria-hidden="true"></我>

检查 fiddle - https://jsfiddle.net/3xc6qfme/