点击剧透内链接导致含tabindex="0"元素关闭的问题修复咨询

这个问题的核心逻辑很明确：你当前的CSS完全依赖.awm_spoilerbox:focus伪类来控制剧透内容的显示状态，但当点击剧透块里的<a>链接时，浏览器会自动把焦点转移到这个链接上，导致父元素.awm_spoilerbox失去焦点，触发CSS里的隐藏规则，剧透就意外关闭了。

最优修复方案：使用:focus-within代替:focus #

:focus-within是CSS的一个实用选择器——它会匹配元素本身获得焦点，或者它的任意子元素获得焦点的状态，完美解决了内部元素抢焦点导致父元素状态失效的问题。

修改后的CSS代码如下：

/* 把所有:focus替换成:focus-within */
.awm_spoilerbox:focus-within .awm_spoiler {display: block;}
.awm_spoilerbox:focus-within .awm_close {display: block;opacity: .75;}
.awm_spoilerbox:focus-within .awm_open {display: none;}
.awm_close {display: none;}
.awm_open {display: block;}
.awm_spoilerbox:focus-within .active {display: block;}
.awm_spoiler { position: absolute; display: none; width: 100%; height: auto; left: 0; top: 30px; }

方案生效逻辑 #

• 点击.awm_spoilerbox（比如Open按钮）时，它获得焦点，:focus-within触发，显示剧透内容；
• 点击剧透块内部的<a href="#">test</a>时，焦点转移到这个链接，但因为它是.awm_spoilerbox的子元素，:focus-within依然保持触发状态，剧透不会关闭；
• 点击Close按钮或者页面其他区域时，.awm_spoilerbox及其子元素都失去焦点，:focus-within失效，剧透正常关闭。

备选兼容方案（针对旧浏览器） #

如果需要兼容不支持:focus-within的旧浏览器（比如IE11及更早），可以用JavaScript控制类名来替代CSS伪类：

1. 给.awm_spoilerbox添加自定义类（比如open）控制显示状态
2. 编写JS逻辑切换类名：

const spoilerBox = document.querySelector('.awm_spoilerbox');
const openBtn = spoilerBox.querySelector('.awm_open');
const closeBtn = spoilerBox.querySelector('.awm_close');
const spoilerLinks = spoilerBox.querySelectorAll('.awm_spoiler a');

// 打开剧透
openBtn.addEventListener('click', () => {
  spoilerBox.classList.add('open');
});

// 关闭剧透
closeBtn.addEventListener('click', () => {
  spoilerBox.classList.remove('open');
});

// 阻止#链接默认跳转（避免页面滚动到顶部）
spoilerLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    if (link.getAttribute('href') === '#') {
      e.preventDefault();
    }
  });
});

// 点击外部区域关闭剧透
document.addEventListener('click', (e) => {
  if (!spoilerBox.contains(e.target)) {
    spoilerBox.classList.remove('open');
  }
});

对应的CSS修改：

.awm_spoilerbox.open .awm_spoiler {display: block;}
.awm_spoilerbox.open .awm_close {display: block;opacity: .75;}
.awm_spoilerbox.open .awm_open {display: none;}
/* 其余原有样式保持不变 */

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