JS操作类名实现控制面板关闭功能失效问题求助

开发房产交易追踪Web应用时，实现了以下交互：

• 页面初始垂直展示房源报价概览
• 点击报价卡片（.offer）可展开对应的控制面板（.control-panel），通过添加scaley类（transform: scaleY(1)）实现展开
• 切换报价时，已打开的面板会自动关闭

但遇到问题：面板内的关闭按钮（.close-bttn）无法关闭其父级控制面板，尝试classList.toggle、classList.remove等方法均无效。

HTML结构 #

<div class="offer">
    <div id="offer-amount"># dollarformat( offer_amount )#</div>
    <div id="buyer-premium"># dollarFormat( buyer_premium )#</div>
    <div id="buyer-name"># buyer_name #</div>
    <div id="agent-name"># agent #</div>
    <div id="agent-email"># agent_email #</div>  
    <div class="control-panel">
       <div class="close-bttn">X</div> 
    </div>   
</div>

核心交互JS代码 #

const eachOffer = document.querySelectorAll(".each-offer");
const controlPanels = document.querySelectorAll(".control-panel");

// 点击报价卡片展开/切换控制面板
eachOffer.forEach((offer)=>{
    var o = offer.querySelector(".control-panel");

    offer.addEventListener('click', ()=>{
        // 关闭所有已打开的面板
        toggleControlPanel()
        o.classList.toggle("scaley")
    })
})

// 关闭所有打开的控制面板
function toggleControlPanel(){
    document.querySelectorAll(".control-panel").forEach((o)=>{
        if( o.classList.contains("scaley") ) o.classList.toggle("scaley")
    });
}

关闭按钮的无效代码 #

controlPanels.forEach((panel)=>{
    panel.querySelector(".close-bttn").addEventListener("click",()=>{
        panel.classList.remove("scaley")
    })
})

解决方案 #

问题根源是事件冒泡：点击关闭按钮时，事件会向上传递到父级的.offer元素，触发了.offer的点击事件——先执行关闭按钮的remove("scaley")，紧接着.offer的事件又调用toggleControlPanel()（关闭所有面板）然后再次toggle("scaley")，导致面板重新展开。

只需在关闭按钮的点击事件中阻止事件冒泡即可：

controlPanels.forEach((panel) => {
    panel.querySelector(".close-bttn").addEventListener("click",(event) => {
        // 阻止事件向上冒泡到父元素
        event.stopPropagation();
        panel.classList.remove("scaley");
    })
})

另外可以优化toggleControlPanel函数，直接移除所有面板的scaley类，无需判断后再toggle，逻辑更清晰：

function toggleControlPanel(){
    document.querySelectorAll(".control-panel").forEach((o) => {
        o.classList.remove("scaley");
    });
}

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