Question

我有一个Javascript函数“ display（）”。我该如何使我的导航在单击时显示“无”，但不起作用，它只会闪烁

我想仅使用javascript使其工作。所以我没有使用queryselector

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属性作为空字符串。

尝试从标签中删除href属性

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

检查小提琴-https://jsfiddle.net/3xc6qfme/

Answer 2

首先删除 href 属性 anchor 标签，该标签始终用于重定向到某些网址。最佳做法是使用

<input type="button" value="Click"/>

，然后使用字体真棒图标代替价值，但是如果您想使用锚标记，则删除href属性或作为href使用

javascript：void（0）

然后尝试

Answer 3

jquery：$（“＃id_name”）。css（“ display”，“ none”）;

javascript：document.getElementById（“ demo”）。style.display =“ none”;

使用它。

为什么显示===“ none”不能给出预期的结果

3 个答案: