下面是一个使用jQuery实现的简单无限级菜单的HTML和jQuery代码示例。这个示例展示了如何创建一个基本的无限级下拉式菜单。请注意，为了简化，这里仅使用HTML和jQuery，没有引入任何额外的CSS样式，但你可以根据需要添加CSS来美化菜单的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 无限级菜单示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 隐藏所有子菜单
$('.submenu').hide();
// 点击菜单项时显示其子菜单
$('.menu-item').click(function(e){
e.stopPropagation(); // 阻止事件冒泡
$(this).children('.submenu').slideToggle('fast'); // 切换子菜单的显示状态
});
// 点击菜单外部时隐藏所有子菜单
$(document).click(function(){
$('.submenu').hide(); // 隐藏所有子菜单
});
// 阻止点击菜单项时触发文档的点击事件
$('.menu').click(function(e){
e.stopPropagation();
});
});
</script>
<style>
/* 这里可以添加一些基本的CSS样式来美化菜单 */
.menu {
list-style-type: none;
padding: 0;
}
.menu-item {
cursor: pointer;
padding: 5px;
border: 1px solid #ccc;
}
.submenu {
list-style-type: none;
padding-left: 20px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-item">菜单项 1
<ul class="submenu">
<li class="menu-item">子菜单项 1-1
<ul class="submenu">
<li class="menu-item">子子菜单项 1-1-1</li>
</ul>
</li>
<li class="menu-item">子菜单项 1-2</li>
</ul>
</li>
<li class="menu-item">菜单项 2
<ul class="submenu">
<li class="menu-item">子菜单项 2-1</li>
</ul>
</li>
</ul>
</body>
</html>
在这个示例中，`.menu-item` 是菜单项和子菜单项的类名，`.submenu` 是子菜单的类名。当点击菜单项时，其内部的子菜单会切换显示状态（如果子菜单已经显示，则会被隐藏；如果子菜单被隐藏，则会被显示）。此外，当点击菜单外部的任何位置时，所有子菜单都会被隐藏。这样可以实现一个简单的无限级菜单效果。