Javascript jQuery下拉菜单没有'；我不知道该怎么做

所以我试着制作一个移动菜单，一切都很顺利，但当我点击它时，它会将我发送到页面顶部，而不是下拉菜单。CDN链接正确（通过jQuery警报检查），因此它是锚定标记错误或jQuery代码。你们能检查一下吗

$（文档）.ready（函数（）{
$（'#i-nav'）。单击（函数（）{
$（'ul'）.toggleClass（'show'）；
});
});
html，
身体{
最小宽度：320px；
最小高度：320px；
保证金：0；
字体系列：“Lato”，无衬线；
背景色：#f1f1；
}
.表演{
显示：块；
}
.testnav ul{
列表样式：无；
-之前的webkit页边距：0；
-webkit后的页边距：0；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：0px；
右边距：50px；
}
李国宝{
显示：内联；
浮动：左；
宽度：自动；
高度：100px；
}
.testnav ul li a{
线高：100px；
显示：块；
浮动：左；
填充：0 20px；
颜色：#626262；
}
#主页：悬停，
#菜单2：悬停，
#菜单3：悬停，
#菜单4：悬停，
#菜单5：悬停{
颜色：白色；
边框底部：5px实心#b0；
}
#主页：悬停{
背景色：rgba（22318766,0.65）；
}
#菜单2：悬停{
背景色：rgba（196,52,52,0.65）；
}
#菜单3：悬停{
背景色：rgba（80,139,97,0.65）；
}
#菜单4：悬停{
背景色：rgba（891481600.65）；
}
#菜单5：悬停{
背景色：rgba（87,95,189,0.65）；
}
#导航{
浮动：左；
z指数：101；
线高：100px；
文本对齐：居中；
显示：无；
}
#标志{
浮动：左；
左边距：50像素；
边缘顶部：15px；
}
a{
文字装饰：无；
文本转换：大写；
}
.右包装{
浮动：对；
}
.测试导航{
宽度：100%；
高度：100px；
背景：白色；
保证金：自动；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.右包装{
浮动：无；
}
.testnav ul{
宽度：100%；
文本对齐：居中；
保证金：0；
显示：无；
}
李国宝{
宽度：100%；
}
.testnav ul li a{
宽度：100%；
文本对齐：居中；
外形：纯白1px；
}
#标志{
利润率：10px；
}
#导航{
浮动：对；
右边距：40px；
显示：块；
字体大小：30px；
颜色：黑色；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
#标志{
宽度：50%；
利润上限：27px；
}
}








页面跳转到顶部，因为当您单击链接时，它认为这是您要执行的操作。为了防止这种情况发生，请尝试像下面那样编辑您的函数。
.preventDefault
函数告诉浏览器，您不希望它像锚定标记一样尝试转到其他页面

$('#i-nav').click(function(e) {
    e.preventDefault();
    $('ul').toggleClass('show');
});

编辑

菜单未显示的原因是您将
show
类添加到页面上的每个ul。尽量具体一些，像
$（'.test nav ul'）.toggleClass（'show'）

如果您仍然看不到菜单，这很可能是因为以前的带有
display:none
的css正在覆盖show类的
display:block
您可以通过将其更改为
display:block来解决此问题！重要信息
或者您可以显式地给
ul
一个类或
id
，然后在jQuery中使用它

这是我所说的一个例子。如果有两个嵌套div，如下所示：

<div class="first">
    <div class="second"></div>
</div>

.first .second {
    display: none;
}

.second {
    display: block;
}

第一个总是会覆盖第二个。
只需在代码中添加一个简单的东西，它就会开始正常工作。加上！对你的班级很重要。展示。检查我的代码以供参考


$（文档）.ready（函数（）{
$（'#i-nav'）。单击（函数（）{
$（'ul'）.toggleClass（'show'）；
});
});
html，
身体{
最小宽度：320px；
最小高度：320px；
保证金：0；
字体系列：“Lato”，无衬线；
背景色：#f1f1；
}
.表演{
显示：块！重要；
}
.testnav ul{
列表样式：无；
-之前的webkit页边距：0；
-webkit后的页边距：0；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：0px；
右边距：50px；
}
李国宝{
显示：内联；
浮动：左；
宽度：自动；
高度：100px；
}
.testnav ul li a{
线高：100px；
显示：块；
浮动：左；
填充：0 20px；
颜色：#626262；
}
#主页：悬停，
#菜单2：悬停，
#菜单3：悬停，
#菜单4：悬停，
#菜单5：悬停{
颜色：白色；
边框底部：5px实心#b0；
}
#主页：悬停{
背景色：rgba（22318766,0.65）；
}
#菜单2：悬停{
背景色：rgba（196,52,52,0.65）；
}
#菜单3：悬停{
背景色：rgba（80,139,97,0.65）；
}
#菜单4：悬停{
背景色：rgba（891481600.65）；
}
#菜单5：悬停{
背景色：rgba（87,95,189,0.65）；
}
#导航{
浮动：左；
z指数：101；
线高：100px；
文本对齐：居中；
显示：无；
}
#标志{
浮动：左；
左边距：50像素；
边缘顶部：15px；
}
a{
文字装饰：无；
文本转换：大写；
}
.右包装{
浮动：对；
}
.测试导航{
宽度：100%；
高度：100px；
背景：白色；
保证金：自动；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.右包装{
浮动：无；
}
.testnav ul{
宽度：100%；
文本对齐：居中；
保证金：0；
显示：无；
}
李国宝{
宽度：100%；
}
.testnav ul li a{
宽度：100%；
文本对齐：居中；
外形：纯白1px；
}
#标志{
利润率：10px；
}
#导航{
浮动：对；
右边距：40px；
显示：块；
字体大小：30px；
颜色：黑色；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
#标志{
宽度：50%；
利润上限：27px；
}
}