这是因为你这里用的是a标签，如果未作专门处理，点击后页面是一定会跳转的（也就意味着页面一定会刷新），而又因为href的属性为空，浏览器就会默认跳转当前页面（也就等价于刷新当前页面），因此当你点击后子菜单显示的一瞬间，页面就立刻刷新了，这样就会立刻恢复原样了。
应该这样：
const click=document.querySelector(".nav1>ul.flex>li:nth-child(2)>a")
click.onclick=function(){
const click1=click.nextElementSibling
click1.classList.toggle('cur')
return false //加了这行，页面就不会跳转了
}
代码如下:
<html>
<head>
<meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv { width:200px height:100px line-height:100px text-align:center background-color:green } </style> <script type="text/javascript"> function Show_Hidden(obj) { if(obj.style.display=="block") { obj.style.display='none' } else { obj.style.display='block' } } window.onload=function() { var olink=document.getElementById("link") var odiv=document.getElementById("thediv") olink.onclick=function() { Show_Hidden(odiv) return false } } </script> </head> <body> <a href="#" id="link">显示\隐藏切换</a> <div id="thediv" style="display:block">欢迎您</div> </body> </html>以上代码实现了我们的要求，点击顶部链接可以实现div显示和隐藏的切换。
实现原理：
为链接注册onclick事件处理函数，此处理函数可以判断div的style.display属性值，如果为block则将其设置为none，也就是将div设置为隐藏状态，否则设置为block，也就是将div设置为显示状态，原理大致如此。
需要特别注意的是，在div中，之所以使style="display:block"的目的是让obj.style.display语句能够获取属性值，否则第一次点击无法将div设置为隐藏，大家可以去掉style="display:block"做一下测试，return false语句是为了防止链接的跳转效果。
