下面是一个使用HTML和JavaScript实现单击按钮显示隐藏子菜单的经典案例。这个示例简单明了，展示了如何通过改变元素的CSS样式属性来控制其显示与隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏子菜单</title>
<style>
.submenu {
display: none; /* 默认隐藏子菜单 */
}
</style>
</head>
<body>
<button onclick="toggleSubmenu()">显示/隐藏子菜单</button>
<div id="submenu" class="submenu">
<p>这是子菜单的内容...</p>
<p>更多子菜单项...</p>
</div>
<script>
function toggleSubmenu() {
var submenu = document.getElementById("submenu");
if (submenu.style.display === "none") {
submenu.style.display = "block"; // 如果子菜单是隐藏的，则显示它
} else {
submenu.style.display = "none"; // 如果子菜单是显示的，则隐藏它
}
}
</script>
</body>
</html>
在这个例子中，我们定义了一个`.submenu`类，它默认将`display`属性设置为`none`，使得子菜单在页面加载时是不可见的。接着，我们创建了一个按钮，并给它设置了一个`onclick`事件处理器，该处理器调用`toggleSubmenu`函数。`toggleSubmenu`函数检查子菜单的`display`属性，如果它是`none`，则将其更改为`block`以显示子菜单；如果它不是`none`（即子菜单已经显示），则将其更改为`none`以隐藏子菜单。这样，每次单击按钮时，子菜单的显示状态都会切换。