下拉菜单无法正常展示Widget内容的问题求助

问题根源 #

你的HTML结构存在错误：content2和content3的<div>标签嵌套在content1的<div>内部且未正确闭合父标签。这导致：

• 切换到content2或content3时，目标元素实际处于被隐藏的content1容器内，即使设置vis类也无法显示
• DOM层级关系不符合预期，JS获取元素时会出现异常

修正后的完整代码 #

HTML部分

<select style="margin-bottom:10px;" id="target">
  <option value="">Select your option</option>
  <option value="content1">Option 1</option>
  <option value="content2">Option 2</option>
  <option value="content3">Option 3</option>
</select>

<div id="content1" class="inv">
  <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;amp;fc=1&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:200px!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
</div>

<div id="content2" class="inv">
  <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;amp;fc=7&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:100%!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
</div>

<div id="content3" class="inv">
  <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;amp;fc=2&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:200px!important;border:0"></iframe>
  <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
</div>

CSS部分

.inv {
  display: none;
}
.vis {
  display: block;
}

注：原CSS缺少.vis类的显式定义，虽然浏览器可能默认显示元素，但显式定义能避免潜在兼容性问题

JS部分（优化后版本，逻辑更清晰）

document.getElementById('target').addEventListener('change', function() {
  'use strict';
  // 隐藏所有已显示的内容
  document.querySelectorAll('.vis').forEach(el => el.classList.replace('vis', 'inv'));
  // 显示选中的目标内容
  const target = document.getElementById(this.value);
  if (target) {
    target.classList.replace('inv', 'vis');
  }
});

补充说明 #

• 原代码测试纯文本或推文时间线时正常，是因为这类简单DOM结构对嵌套错误的容忍度更高，而iframe这类外部资源容器对DOM层级依赖更强
• 优化后的JS使用classList.replace和querySelectorAll，逻辑更简洁且兼容性良好

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