Javascript 努力向导航栏添加下拉效果

当按下汉堡包菜单时，我一直在努力让手机上的导航栏向下转换。我已经添加了CSS并进行了调查，但我很难理解为什么它不起作用

我想下拉导航栏，改变链接的不透明度

我使用了下面的答案来修改我的代码，但我仍然遇到困难

提前谢谢

函数myFunction（）{
var x=document.getElementById（“myLink”）；
if（x.className.indexOf（'easein'）>-1）{
x、 类列表。删除（'easein'）；
x、 类列表。添加（'easeout'）
}
否则{
x、 添加（'easein'）；
x、 classList.remove（'easeout'）
}
}

.topnav{
显示：块；
背景色：#fff；
盒影：1px 1px 16px 2px红色；
位置：固定；
z指数：45；
右：0；
宽度：100vw；
}
.topnav a#home{
左：0；
}
.topnav.myLinks{
身高：0；
不透明度：0；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
.topnav a{
颜色：#0000a0；
填充：14px 16px；
文字装饰：无；
字号：17px；
字号：700；
显示：块；
}
.topnav a.icon{
背景：#fff；
显示：块；
位置：绝对位置；
右：0；
top:4vw；
文本对齐：居中；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
法兰西{
颜色：红色；
}
#MyLink a{
左-10%；
边界半径：0；
宽度：100vw；
保证金：0；
}
.topnav.myLinks.easein{
高度：500px；
不透明度：1；
}
.topnav.myLinks.easeout{
高度：0px；
不透明度：0；
}

---

问题是您已将CSS属性显示设置为具有动画，我建议您将其更改为

不透明度

和

高度

，还请注意，我曾用于添加/删除类，以下是您要查找的实现：

函数myFunction（）{
var x=document.getElementById（“myLink”）；
if（x.className.indexOf（'easein'）>-1）{
x、 类列表。删除（'easein'）；
x、 类列表。添加（'easeout'）
}
否则{
x、 添加（'easein'）；
x、 classList.remove（'easeout'）
}
}

.topnav{
背景色：#fff；
盒影：1px 1px 16px 2px红色；
位置：固定；
z指数：20；
右：0；
宽度：100vw；
}
.topnav a#home{
左：0；
}
.topnav.myLinks{
身高：0；
不透明度：0；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
.topnav a{
颜色：#0000a0；
填充：14px 16px；
文字装饰：无；
字号：17px；
显示：块；
}
.topnav a.icon{
背景：#fff；
显示：块；
位置：绝对位置；
右：0；
top:4vw；
文本对齐：居中；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
法兰西{
颜色：红色；
}
.我认为{
宽度：100vw；
}
.topnav.myLinks.easein{
高度：500px；
不透明度：1；
}
.topnav.myLinks.easeout{
高度：0px；
不透明度：0；
}

感谢您的回复。我已经修改了我的代码，但仍然遇到一个问题。先生，您能看一看吗？谢谢你的帮助time@AliShahVis，如果你觉得我的回答有帮助，请接受并投赞成票：）我会很好的，先生，只是想让它在我这边起作用。有一些问题要解决work@AliShahVis，我希望它现在能为您工作，我在您的问题片段中添加了一条说明问题的评论，如果它还不工作，请告诉我！当然会有帮助。只需将

.topnav#myLinks

替换为

.topnav.myLinks

，使用ID选择器将始终应用CSS规则并覆盖任何其他规则。