开关按钮双条件功能异常：仅单条件生效排查求助

问题根源及修复步骤 #

1. HTML按钮标签语法错误

按钮标签存在语法缺陷，缺少标签闭合的必要符号，导致按钮无法正常渲染，点击事件根本无法触发：

<!-- 错误写法 -->
<button onclick="onOffCollapsedAds()" class="collapsed-top-ads-button"close</button>

<!-- 修正后 -->
<button onclick="onOffCollapsedAds()" class="collapsed-top-ads-button">close</button>

2. CSS过渡属性缺少时间单位

transition属性中的0.5未添加时间单位s，浏览器无法识别过渡时长，导致过渡效果失效：

/* 错误写法 */
transition: all 0.5 ease-in-out;

/* 修正后 */
transition: all 0.5s ease-in-out;

3. 优化DOM查询性能

每次点击重复调用document.querySelector会降低性能，建议提前缓存DOM元素，减少重复查找。

完整修正代码 #

JavaScript

let openedTopAdsButton = true;
// 提前缓存DOM元素，避免重复查询
const topAds = document.querySelector(".collapsed-top-ads");
const topAdsButton = document.querySelector(".collapsed-top-ads-button");

const onOffCollapsedAds = () => {
  if (openedTopAdsButton) {
    topAds.style.opacity = "0";
    topAds.style.height = "0";
    topAdsButton.textContent = "show";
    openedTopAdsButton = false;
  } else {
    topAds.style.opacity = "1";
    topAds.style.height = "auto";
    topAdsButton.textContent = "close";
    openedTopAdsButton = true;
  }
};

CSS

.collapsed-top-ads {
  width: 10%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  transition: all 0.5s ease-in-out;
  overflow: hidden; /* 新增：避免高度为0时内容溢出 */
}
.collapsed-top-ads-img {
  width: 100%;
}
.collapsed-top-ads-img img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}
.collapsed-top-ads-button {
  width: 10%;
  margin: 0 auto; /* 让按钮和广告居中对齐 */
  border: none;
  height: 30px;
  background-color: white;
  font-weight: 500;
  transition: all 0.5s ease-in-out;
}

HTML

<div class="collapsed-top-ads">
  <div class="collapsed-top-ads-img">
    <img src="https://pbs.twimg.com/profile_images/1502802652777779200/6_hqg9tl_400x400.png" alt="british-turks">
  </div>
</div>
<button onclick="onOffCollapsedAds()" class="collapsed-top-ads-button">close</button>

额外优化说明 #

• 给.collapsed-top-ads添加overflow: hidden，确保高度变为0时广告内容不会溢出显示；
• 调整按钮宽度和居中样式，让视觉布局更协调。

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