jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。二级菜单通常是指在一个主菜单项下,点击后展开的子菜单项。
二级菜单消失可能是由于以下原因导致的:
确保事件绑定正确,可以使用 jQuery 的 click
或 on
方法来绑定点击事件。
$(document).ready(function() {
$('.menu-item').click(function() {
$(this).find('.sub-menu').toggle();
});
});
确保 CSS 样式没有将子菜单设置为隐藏。
.sub-menu {
display: none;
}
打开浏览器的开发者工具,查看控制台是否有错误信息。常见的错误包括未定义的变量、语法错误等。
$(document).ready(function() {
$('.menu-item').click(function() {
$(this).find('.sub-menu').toggle();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 二级菜单</title>
<style>
.sub-menu {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="menu">
<li class="menu-item">菜单1
<ul class="sub-menu">
<li>子菜单1-1</li>
<li>子菜单1-2</li>
</ul>
</li>
<li class="menu-item">菜单2
<ul class="sub-menu">
<li>子菜单2-1</li>
<li>子菜单2-2</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function() {
$('.menu-item').click(function() {
$(this).find('.sub-menu').toggle();
});
});
</script>
</body>
</html>
通过以上步骤,可以有效地解决 jQuery 二级菜单消失的问题。如果问题依然存在,建议进一步检查代码逻辑和浏览器兼容性。
没有搜到相关的沙龙