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

Question

I have a Javascript function "display()". I what to make my nav display "none" on click, but is not working it just blinks

I want to make it work using only javascript. so i am not using 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> 

I want to make my nav display none on click, but it just blinks on clicking

Answer 1

This is happening because you are using onclick on <a> tag with href attribute as empty string.

Try removing href attribute from the a tag

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

Check the fiddle - https://jsfiddle.net/3xc6qfme/

Answer 2

first remove the href attribute anchor tag is always used to redirect to certain url. best practice is to use

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

and then use your font awesome icons in place of value, but if you want to use anchor tag then remove href attribute or as href use

javascript:void(0)

then try

Answer 3

jquery: $("#id_name").css("display", "none");

javascript: document.getElementById("demo").style.display = "none";

Use this.