SVG汉堡包菜单:我怎么才能在每次点击它的时候改变它的颜色呢？

颜色切换不明显: 可以尝试使用对比度更高的颜色组合，或者在颜色变化时添加过渡动画。
点击事件不触发: 确保JavaScript代码正确加载，并且没有其他脚本错误干扰事件监听。

要实现SVG汉堡包菜单在每次点击时改变颜色的效果，你可以使用JavaScript来监听点击事件，并在事件触发时修改SVG元素的样式。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG汉堡包菜单</title>
<style>
  .menu-icon {
    cursor: pointer;
    fill: #000; /* 初始颜色 */
  }
</style>
</head>
<body>
<svg class="menu-icon" width="30" height="20" viewBox="0 0 30 20">
  <rect width="30" height="4" rx="2" ry="2"/>
  <rect y="8" width="30" height="4" rx="2" ry="2"/>
  <rect y="16" width="30" height="4" rx="2" ry="2"/>
</svg>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
  const menuIcon = document.querySelector('.menu-icon');
  let isClicked = false;

  menuIcon.addEventListener('click', function() {
    isClicked = !isClicked;
    menuIcon.style.fill = isClicked ? '#FF0000' : '#000000'; // 切换颜色
  });
});