本文主要是介绍2023.12.1 手风琴菜单的简便实现方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
2023.12.1 手风琴菜单的简便实现方式
原先一般都用循环方式去写手风琴菜单，对单个菜单的样式调整并不灵活，并且需要清楚控制逻辑，偶然看到一种写手风琴菜单的方式，通过js传id的方式实现，也可以用于下拉菜单。记录下来供参考。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后端管理网站</title><style>/* 隐藏下拉菜单 */#menu1, #menu2 {display: none;}</style>
</head>
<body><ul><li><a href="#">首页</a></li><li><a href="#" onclick="toggleMenu('menu1')">菜单1</a><ul id="menu1"><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li></ul></li><li><a href="#" onclick="toggleMenu('menu2')">菜单2</a><ul id="menu2"><li><a href="#">子菜单4</a></li><li><a href="#">子菜单5</a></li><li><a href="#">子菜单6</a></li></ul></li><li><a href="#">菜单3</a></li></ul><script>function toggleMenu(id) {var menu = document.getElementById(id);if (menu.style.display === 'block') {menu.style.display = 'none';} else {menu.style.display = 'block';}}</script>
</body>
</html>
这篇关于2023.12.1 手风琴菜单的简便实现方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
