点击锚点标签或SVG展开子菜单的问题求助

原代码核心问题 #

1. 选择器错误：document.querySelector("b1000")未添加类选择器前缀.，无法正确选中<a class="b1000">元素
2. 事件绑定不完整：仅给单个元素绑定了点击事件，未处理SVG的点击逻辑
3. 显示逻辑冲突：CSS设置子菜单left: -700px，但JS中修改right: 0，无法触发正确显示效果
4. 未阻止默认行为：标签点击后会触发页面跳转，导致展开效果失效

修正后的完整代码 #

HTML（无需修改，仅给关闭按钮新增类便于选择）

<div class="nav2-search">
  <a class="b1000" href="">search</a>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
    <rect width="256" height="256" fill="none"/>
    <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/>
    <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/>
  </svg>
</div>

<div id="nav2-seachex">
  <a href="" class="close-btn">x</a>
</div>

CSS（新增类控制显示，添加过渡动画优化体验）

#nav2-seachex {
  position: fixed;
  top: 0;
  left: -700px;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  background-color: rgb(247, 3, 3);
  z-index: 999;
  transition: left 0.3s ease;
}

#nav2-seachex.active {
  left: 0;
}

.nav2-search svg {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
}

JavaScript（绑定双元素事件，完善显示/关闭逻辑）

// 获取所有触发元素：a标签和SVG
const triggerElements = document.querySelectorAll(".b1000, .nav2-search svg");
const subMenu = document.getElementById("nav2-seachex");
const closeBtn = subMenu.querySelector(".close-btn");

// 给每个触发元素绑定点击事件
triggerElements.forEach(element => {
  element.addEventListener("click", function(event) {
    // 阻止a标签的默认跳转行为
    if (element.tagName === "A") {
      event.preventDefault();
    }
    // 显示子菜单
    subMenu.classList.add("active");
  });
});

// 子菜单关闭逻辑
closeBtn.addEventListener("click", function(event) {
  event.preventDefault();
  subMenu.classList.remove("active");
});

// 点击子菜单内部不触发关闭（可选）
subMenu.addEventListener("click", function(event) {
  event.stopPropagation();
});

关键优化点 #

• 用querySelectorAll批量选中触发元素，通过forEach遍历绑定事件，确保和SVG都能响应点击
• 使用类名active控制显示/隐藏，比直接修改行内样式更易维护，还能配合CSS过渡实现平滑动画
• 强制阻止标签的默认跳转行为，避免页面刷新导致状态丢失
• 新增关闭按钮的独立事件，完善子菜单的完整交互逻辑