如何在点击父div时切换其子div的.visible类或可见性样式

方案一：切换子元素的 .visible 类 #

直接在原有点击事件逻辑中，定位当前点击的 .parent 下的 .child 元素，调用 classList.toggle() 切换类即可：

const parent = document.querySelectorAll('.parent');
if(parent.length){
   for (let l of parent){
      l.addEventListener('click', (e)=>{
        // 获取当前父元素下的子元素
        const child = l.querySelector('.child');
        // 切换子元素的visible类
        child.classList.toggle('visible');
        // 若需要保留父元素自身的visible类切换，保留下方代码，否则删除
        // l.classList.toggle('visible')
      })
   }
}

对应的CSS需预先定义 .visible 类的显示逻辑：

.child {
  visibility: hidden; /* 默认隐藏 */
}
.child.visible {
  visibility: visible; /* 切换后显示 */
}

方案二：直接设置 visibility 样式 #

若不想通过类控制，可直接操作DOM元素的样式属性，根据当前状态切换显示/隐藏：

const parent = document.querySelectorAll('.parent');
if(parent.length){
   for (let l of parent){
      l.addEventListener('click', (e)=>{
        const child = l.querySelector('.child');
        // 判断当前可见状态，切换样式
        child.style.visibility = child.style.visibility === 'visible' ? 'hidden' : 'visible';
        // 若需要保留父元素自身的visible类切换，保留下方代码，否则删除
        // l.classList.toggle('visible')
      })
   }
}

补充说明 #

• 若 .child 是 .parent 的直接子元素，也可使用 l.children[0] 或 l.querySelector(':scope > .child') 精准定位；
• 若单个 .parent 下有多个 .child，需改用 querySelectorAll('.child') 遍历处理每个子元素。

内容的提问来源于stack exchange，提问作者Einar Zotterman