Lightbox导航按钮不显示求助：点击有效但无视觉呈现

问题描述 #

我已成功为图片启用Lightbox功能，但遇到一个问题：导航按钮无法显示，不过点击对应区域时功能仍可正常生效。我怀疑是文档结构（如div布局）导致的，但不清楚如何通过CSS恢复导航按钮的显示。

现有代码 #

JavaScript #

document.querySelectorAll(".collapsible").forEach((coll) => {
  coll.addEventListener("click", () => {
    coll.classList.toggle("active");

    const content = coll.nextElementSibling;

    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      // 新增：
      content.style.borderWidth = 0;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      // 新增：
      content.style.borderWidth = "1px";
    }
  });
});

CSS #

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: border 0.2s ease-out, max-height 0.2s ease-out;
  background-color: white;
  border: 0px solid #D1D3D4;
  border-radius: 3px;
}

.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

HTML #

<button type="button" class="collapsible">查看日志 <div class="icon"></div></button>

<div class="content">
  <div class="column">
    <p>确保碟片强度不为“0”。</p>
  </div>
  <div class="column">
    <a href="../images/discStrength.png" data-lightbox="image-1" data-title="确保高亮日志不为零。"> 
      <img src="../images/discStrength.png" alt="日志截图"> 
    </a>
  </div>
</div>

解决方案 #

导航按钮不显示但功能正常，核心原因通常是层级被覆盖、样式透明/继承隐藏、父容器overflow截断，以下是针对性修复：

1. 强制提升导航按钮层级 #

Lightbox按钮默认层级可能被.content或其他容器压制，给按钮设置更高的z-index：

.lb-nav a.lb-prev,
.lb-nav a.lb-next {
  z-index: 9999 !important;
}

2. 解除父容器的overflow限制 #

你的.content设置了overflow: hidden，如果Lightbox弹窗被限制在该容器内，会截断按钮：

.content {
  overflow: visible !important; /* 先测试是否是这个原因，确认后可优化为仅在弹窗显示时调整 */
}

3. 重置按钮可见样式 #

部分Lightbox插件的按钮默认透明或颜色与背景重合，强制设置可见样式：

/* 确保按钮不透明 */
.lb-nav a {
  opacity: 1 !important;
  width: 30% !important; /* 扩大点击/显示区域 */
}

/* 自定义按钮样式（用图标或文字均可） */
.lb-nav a.lb-prev {
  color: #fff;
  font-size: 30px;
  padding-left: 20px;
}

.lb-nav a.lb-next {
  color: #fff;
  font-size: 30px;
  padding-right: 20px;
}

4. 降低容器层级干扰 #

避免.content或父容器的z-index高于Lightbox弹窗：

.content {
  z-index: auto !important;
}

调试建议 #

1. 按F12打开开发者工具，找到Lightbox导航按钮元素，检查display、opacity、z-index属性，看是否被其他元素遮挡。
2. 给按钮临时添加border: 1px solid red，定位按钮位置后再调整样式。

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