如何通过点击锚点或 SVG 图标触发子菜单展开与收起-js教程-PHP中文网

如何通过点击锚点或 SVG 图标触发子菜单展开与收起

本文介绍一种语义化、可访问且易于维护的方案：使用包裹文本与 SVG 图标，通过 CSS 类切换控制固定定位子菜单的显隐状态，避免事件绑定冲突与 querySelector 选择器失效问题。

本文介绍一种语义化、可访问且易于维护的方案：使用 `

在实现导航子菜单（如搜索面板）的交互时，常见误区是分别给标签和 统一语义容器 + 类名驱动动画。

✅ 推荐方案：按钮封装 + CSS 过渡 + 类名控制

将触发元素统一为

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

<!-- 触发按钮：文本 + SVG 图标一体化 -->
<button class="btn-default btn-open" type="button" aria-label="打开搜索面板">
  search
  <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="none" stroke="#000" stroke-width="14"><circle cx="116" cy="116" r="84"></circle><line x1="175.4" y1="175.4" x2="224" y2="224" stroke-linecap="round"></line></svg></button>

<!-- 子菜单容器（初始隐藏） -->
<div class="nav2-seachex" id="nav2-seachex">
  <button class="btn-default btn-close" type="button" aria-label="关闭搜索面板">x</button>
  <!-- 其他搜索内容 -->
</div>

? JavaScript：精简可靠的事件控制

const btnOpen = document.querySelector('.btn-open');
const btnClose = document.querySelector('.btn-close');
const nav = document.getElementById('nav2-seachex');

// 点击打开：切换 .nav-open 类
btnOpen.addEventListener('click', () => {
  nav.classList.add('nav-open'); // 推荐 add() 而非 toggle()，避免意外关闭
});

// 点击关闭：移除类
btnClose.addEventListener('click', () => {
  nav.classList.remove('nav-open');
});

// 【可选】ESC 键关闭
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && nav.classList.contains('nav-open')) {
    nav.classList.remove('nav-open');
  }
});

? CSS：利用 transform 实现高性能动画

.nav2-seachex {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  background-color: rgb(247, 3, 3);
  z-index: 999;
  transform: translateX(-100%); /* 初始完全左移隐藏 */
  transition: transform 0.3s ease-in-out; /* 平滑过渡 */
}

.nav-open {
  transform: translateX(0); /* 展开时归位 */
}

/* 重置按钮样式，保留图标语义 */
.btn-default {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 文本与图标间距 */
}

.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em; /* 微调基线对齐 */
}

⚠️ 关键注意事项

不要混用和 ：默认跳转，需 e.preventDefault()；而
避免无效选择器：document.querySelector("b1000") 查找的是标签名为 b1000 的元素（不存在），应改为 ".b1000"（类名）或 "#b1000"（ID）。
禁用 event.stopPropagation() 的滥用：原代码中 subMenu.addEventListener("click", ...) 的 stopPropagation() 可能阻碍内部按钮点击，实际只需为关闭按钮单独监听即可。
增强可访问性：为按钮添加 aria-label，并支持键盘操作（已通过 keydown 监听 ESC 实现）。