点击手风琴轮播面板项无法切换图片、单面板展开及图片位置问题

问题1：点击非上次点击的面板项时无法替换示例猫图片 #

问题原因 #

1. 原有判断逻辑括号配对错误，&&优先级高于||，导致判断条件执行逻辑不符合预期
2. 全局div计数逻辑错误，点击任意面板都会累加计数，使用div%2!="0"判断展开状态完全不可靠，会出现切换新面板时触发else分支隐藏对应图片的问题

修复代码（JS部分替换原有clicado函数） #

let activePanel = null; // 存储当前激活的面板ID
document.getElementById("imagemLat1").style.visibility = "hidden";
document.getElementById("imagemLat2").style.visibility = "hidden";
document.getElementById("imagemLat3").style.visibility = "hidden";
function clicado(clicked){
    // 先隐藏所有图片
    document.getElementById("imagemLat1").style.visibility = "hidden";
    document.getElementById("imagemLat2").style.visibility = "hidden";
    document.getElementById("imagemLat3").style.visibility = "hidden";
    // 如果点击的是当前已激活的面板，就取消激活
    if(activePanel === clicked) {
        activePanel = null;
        return;
    }
    // 激活新面板，显示对应图片
    activePanel = clicked;
    document.getElementById(`imagemLat${clicked.replace('panel','')}`).style.visibility = "visible";
}

问题2：三张图片展示在同一位置 #

问题原因 #

原有三张图片分别放在独立的.sidebar-image容器中，默认块级元素会纵向排列，无法重叠

修复方案 #

1. HTML部分：把三个图片链接放到同一个父容器内

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5"><br><br><br>
    <div class="image-wrapper">
        <a id="imagemLat1" href="testMain.html"><span style="display: block;"><img id="logo1" src="https://i.ytimg.com/vi/fleIpdMXopc/maxresdefault.jpg"></span></a>
        <a id="imagemLat2" href="testMain.html"><span style="display: block;"><img id="logo2" src="https://www.pets4homes.co.uk/images/classifieds/2013/10/02/438916/large/lovely-1-year-old-tabby-cat-female-524c0ebc2c3f1.jpg"></span></a>
        <a id="imagemLat3" href="testMain.html"><span style="display: block;"><img id="logo3" src="https://www.pets4homes.co.uk/images/classifieds/2013/08/21/398215/large/1-year-old-male-fluffy-white-cat-52147ca5d8b39.jpg"></span></a>
    </div>
</div>

2. CSS部分新增定位样式

.image-wrapper {
  position: relative;
  width: 100%;
  /* 按需要设置高度，和图片实际高度匹配即可 */
  height: 300px;
}
.image-wrapper a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

问题3：仅单个面板可展开，点击新面板自动关闭之前打开的面板 #

问题原因 #

原有手风琴点击事件只处理当前点击面板的展开/收起，没有遍历关闭其他已展开的面板

修复代码（替换原有手风琴绑定逻辑） #

var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length ; i++) {
    acc[i].addEventListener("click", function() {
        const isActive = this.classList.contains("toggle");
        // 先关闭所有面板
        for(var j=0;j<acc.length;j++){
            acc[j].classList.remove("toggle");
            acc[j].nextElementSibling.style.maxHeight = null;
        }
        // 如果当前点击的之前未激活，就展开当前
        if(!isActive) {
            this.classList.add("toggle");
            const panel = this.nextElementSibling;
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    });
}

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