Django开发中实现点击单个图标仅激活对应menuToggle的问题咨询

架构老林

2026-9-25

问题根源

你当前的JS代码使用document.querySelectorAll('.menupost')选中了页面内所有带.menupost类的元素统一切换激活状态，因此点击任意图标都会触发所有菜单展开。

调整步骤

1. 修改模板中的点击事件传参

将icon元素的onclick属性修改为传入当前点击的元素本身：

<div class="icon" onclick="menuToggle1(this);">
    <img src="{% static 'images/ore.svg'%}" class="svg">
</div>

2. 重写JS逻辑，仅切换对应菜单

修改menuToggle1函数，根据传入的点击元素定位到对应的唯一菜单，再做状态切换：

function menuToggle1(clickIcon){
    // 定位到当前点击图标所属的action1容器，再查找该容器下的菜单
    const currentMenu = clickIcon.closest('.action1').querySelector('.menupost');
    // 可选功能：如果需要点击时关闭其他所有已展开的菜单，取消注释下面代码即可
    // document.querySelectorAll('.menupost').forEach(menu => {
    //     if(menu !== currentMenu) menu.classList.remove('active');
    // })
    // 切换当前菜单的激活状态
    currentMenu.classList.toggle('active');
};