本文介绍如何使用 jquery 在手风琴式侧边栏导航中，点击某项时展开其子菜单并将其箭头图标切换为向下（bi-chevron-down），同时将其他所有项的箭头统一重置为向右（bi-chevron-right），确保视觉状态与 dom 可见性严格同步。
本文介绍如何使用 jquery 在手风琴式侧边栏导航中，点击某项时展开其子菜单并将其箭头图标切换为向下（bi-chevron-down），同时将其他所有项的箭头统一重置为向右（bi-chevron-right），确保视觉状态与 dom 可见性严格同步。
在构建响应式侧边栏导航（如 Bootstrap 风格的折叠菜单）时，仅控制 <ul></ul> 的 show/hide 状态是不够的——图标状态（如 bi-chevron-right ↔ bi-chevron-down）必须与实际可见性严格一致，否则会出现“菜单已收起但图标仍显示向下”的视觉错位。
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 正确逻辑解析
核心原则是：“当前项图标随自身展开状态切换；其余项图标强制归位”。
避免对非当前项使用 toggleClass（易因状态不一致导致误判），而应采用确定性操作：
- 对其他所有
li.dropdown：移除bi-chevron-down，添加bi-chevron-right（强制重置）； - 对当前点击项：直接
toggleClass("bi-chevron-right bi-chevron-down")（自动适配展开/收起）； - 同时配合
ul的toggle('slow')与hide()，保证 DOM 与 UI 同步。
✅ 优化后的完整 jQuery 代码
$(document).ready(function() {
$('li.dropdown').click(function(e) {
// 阻止 <a> 默认跳转（因 href="javascript:void(0)" 已处理，但双重保险）
e.preventDefault();
const $this = $(this);
const $submenu = $this.find('ul.sidenav-second-level');
// 【步骤1】收起其他所有子菜单，并重置其箭头为 →
$('li.dropdown').not($this)
.find('ul.sidenav-second-level').hide()
.end()
.find('.iChev')
.removeClass('bi-chevron-down')
.addClass('bi-chevron-right');
// 【步骤2】切换当前子菜单，并翻转其箭头（→ ↔ ↓）
$submenu.toggle('slow');
$this.find('.iChev').toggleClass('bi-chevron-right bi-chevron-down');
});
// 阻止子菜单内链接触发父级折叠（关键！）
$('li.dropdown ul.sidenav-second-level li a').click(function(e) {
e.stopPropagation(); // 防止事件冒泡到 li.dropdown
});
});⚠️ 注意事项与最佳实践
-
CSS 类名一致性：确保所有箭头图标均使用
.iChev类，且初始状态为bi-chevron-right（HTML 中已满足）； -
性能优化：使用
.end()链式调用减少重复查找，提升执行效率； -
可访问性补充：建议为展开/收起状态添加
aria-expanded="true/false"属性，便于屏幕阅读器识别； -
移动端兼容性：若需支持触摸设备，可额外绑定
touchstart事件（jQuery 中click在多数现代移动浏览器中已自动兼容）； -
扩展建议：如需记忆上次展开项，可结合
localStorage存储id（如"collapseHome"），页面加载后自动展开。
通过上述实现，你将获得一个状态精准、交互流畅、符合语义化规范的折叠导航组件——每一次点击，DOM、样式与可访问性属性三者完全协同，真正实现“所见即所得”。
