可展开图库关闭按钮失效且展开功能异常问题求助

关闭按钮不显示的原因 #

• 你的.container元素未设置position: relative，而.closebtn使用了position: absolute。绝对定位元素会相对于最近的已定位父元素（即position值不为static的父元素）进行定位，这里父元素无定位属性，导致关闭按钮被定位到容器外部，无法正常显示。
• 另外.container默认处于display: none状态，仅在展开图片时显示，但核心问题还是父元素缺失定位配置。

展开功能失效的问题 #

从代码仓库来看，负责触发图片展开的JavaScript逻辑存在缺失：

• 未给缩略图绑定正确的点击事件，导致点击时无法触发大图显示流程。
• 缺少“设置大图src并显示.container”的核心执行逻辑。

具体修复步骤 #

1. 修复关闭按钮显示 #

修改.container的CSS，添加定位属性：

.container {
    position: relative;
    /* 保留原有样式，比如默认的 display: none; */
}

添加后，.closebtn会相对于.container定位，按钮就能正常显示在容器右上角。

2. 修复展开功能逻辑 #

在JavaScript中补充正确的事件绑定与显示逻辑：

// 获取所有缩略图、大图容器和大图元素
const thumbnails = document.querySelectorAll('.project-img');
const expandedContainer = document.querySelector('.container');
const expandedImage = document.getElementById('expandedImg');

// 给每个缩略图绑定点击事件
thumbnails.forEach(thumb => {
    thumb.addEventListener('click', () => {
        // 将大图的src设置为当前缩略图的src
        expandedImage.src = thumb.src;
        // 显示大图容器
        expandedContainer.style.display = 'block';
    });
});

同时确保.container的默认CSS为display: none，保证初始状态下容器隐藏，点击缩略图后才显示。

3. 验证关闭按钮逻辑 #

关闭按钮现有代码onclick="this.parentElement.style.display = 'none'"逻辑有效，只需确保.closebtn的直接父元素是.container，保持当前HTML结构即可。

内容的提问来源于stack exchange，提问作者Tory S.