css中的隐藏元素，通过Javascript函数使用onclick事件切换时显示_Javascript_Html_Css

css中的隐藏元素，通过Javascript函数使用onclick事件切换时显示

javascript html css

css中的隐藏元素，通过Javascript函数使用onclick事件切换时显示,javascript,html,css,Javascript,Html,Css,我试图在我的汉堡包图标上创建一个函数，在较小的屏幕上显示一个元素，该元素被操纵为显示：在我的css中没有。我能够使它出现在屏幕上，低于800px时，切换，但它出现在短短几毫秒内很快。我一直在想该怎么办，但找不到答案 HTML <body> <nav> <a class="toggle" href="" onclick = "func1()"><i class="fas fa-bars" > </i></a>

我试图在我的汉堡包图标上创建一个函数，在较小的屏幕上显示一个元素，该元素被操纵为显示：在我的css中没有。我能够使它出现在屏幕上，低于800px时，切换，但它出现在短短几毫秒内很快。我一直在想该怎么办，但找不到答案

HTML

<body>
<nav>     
    <a class="toggle" href="" onclick = "func1()"><i class="fas fa-bars" > 
</i></a>
<ul id="defaultnav" class="topnav">
    <li class="current"><a class = "navlinks" href = "">Home</a></li>
    <li><a class = "navlinks" href  = "Services.html">Services</a></li>
    <li><a class = "navlinks" href = "About.html">About</a></li>
    <li><a class = "navlinks pointer" 
onclick="document.getElementById('id01').style.display='block'" 
style="width:auto;">Login</a></li>
    <li><a class = "navlinks" href  = "Signup.html">Sign Up</a></li>
</ul>  
</nav>    


<script src="./script/test.js"></script>
</body>

JAVASCRIPT

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

标记的

href

属性为空，添加

href=“javascript:void（0）”

以防止浏览器的默认操作

<a class="toggle"  href="javascript:void(0)" onclick="func1()"><i class="fas fa-bars" >

.toggle{
宽度：100%；
保证金：0；
填充：0 15px 0 0；
字体大小：20px；
显示：无；
颜色：#ffd34f；
}
.切换：悬停{
颜色：白色；
}
@媒体屏幕和屏幕（最大宽度：800px）{
#默认导航{
显示：无；
}
.切换{
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：800px）{
#默认导航响应{
显示：块；
位置：固定；
填充：20px；
边框：2个实心#FFB600；
背景：#1A1A；
右：15px；
宽度：50%；
边界半径：20px 0 15px 10px；
z指数：99999；
}
#默认导航{
文本对齐：居中；
宽度：100%；
填充：10px0；
保证金：0；
}
}

将

href=“#”

添加到

标记中，同时添加

显示：阻止！重要的

到

#defaultnav.responsive{

css

为什么要在

nav

标签和

body

后面加上

nav

必须在

body

里面，这只是一个打字错误。我已经编辑过了。这已经完成了！非常感谢！在我观看的教程中没有讨论这个语法。。

<a class="toggle"  href="javascript:void(0)" onclick="func1()"><i class="fas fa-bars" >