gpt4 book ai didi

jquery - 使用 jQuery 尝试菜单切换时没有任何反应

转载 作者:行者123 更新时间:2023-11-28 02:54:52 24 4
gpt4 key购买 nike

我只是整个 javascript/jQuery 世界的新手,遇到了一些我无法识别的问题。我正在用一个将成为菜单的列表来测试 .toggle。但是,当我按下为切换菜单而设置的临时按钮时,没有任何反应。

我的代码:

$(document).ready(function() {
$("#menuIcon").click(function() {
$("#menu").fadeIn(1000);
});
});
#menuIcon {
display: none;
}
@media screen and (max-width: 1000px) {
#menu {
display: none;
}
#menuIcon {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menuIcon">Click Me</button>
<div id="menu">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Page</li>
<li>Contact</li>
</ul>
</nav>
</div>

最佳答案

在代码中链接 jquery 脚本并使用 Jquery toggle 切换菜单的显示

$("#menu").toggle("display")

目前您正在菜单中淡出。

检查下面的更新代码:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#menuIcon{
display: none;
}
@media screen and (max-width: 1000px){
#menu{

display: none;
}
#menuIcon{
display: block;
}
}
</style>
</head>
<body>
<button id="menuIcon">Click Me</button>
<div id="menu">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Page</li>
<li>Contact</li>
</ul>
</nav>
</div>
<script>
$(document).ready(function(){
$("#menuIcon").click(function(){
$("#menu").toggle("display");
})
});
</script>
</body>
</html>

关于jquery - 使用 jQuery 尝试菜单切换时没有任何反应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46512320/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com