如何在现有HTML结构中实现点击Season触发下拉菜单的功能

你可以通过修改HTML结构+添加CSS样式+简单JS逻辑实现需求，步骤如下： #

1. 修改原有HTML结构 #

找到Season对应的li标签，添加下拉菜单容器，修改后代码如下：

<ul class="video-meta">
  <li>
    <a href="#">
      <img src="assets/images/6b1345063abbc415fde0677567f2cf59.jpg" alt="Bayley"></a>
    <span class="pl-10"> Bayley</span>
  </li>
  <li>
    <i class="fas fa-eye"></i>1260 Views
  </li>
  <!-- 修改后的Season下拉模块 -->
  <li class="season-dropdown">
    <i class="fas fa-tags"></i> <a href="archive.html" class="season-trigger">Season</a>
    <ul class="season-options">
      <li><a href="your-season1-link">Season 1</a></li>
      <li><a href="your-season2-link">Season 2</a></li>
    </ul>
  </li>
  <li>
    <i class="fas fa-photo-video"></i> 2 h 20 min
  </li>
  <li>
    <i class="fas fa-calendar-alt"></i> Nov 2020
  </li>
  <li>
    <i class="fas fa-film"></i> 4K
  </li>
</ul>

2. 添加CSS样式 #

控制下拉菜单的默认隐藏状态和显示样式，避免挤压原有页面布局：

/* 给下拉父级加相对定位，作为下拉菜单的定位参照 */
.season-dropdown {
  position: relative;
}
/* 下拉菜单默认隐藏 */
.season-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 4px 0 0 0;
  padding: 8px 0;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-width: 100px;
  z-index: 999;
}
/* 下拉选项样式 */
.season-options li {
  padding: 6px 12px;
}
.season-options li a {
  color: #333;
  text-decoration: none;
}
.season-options li:hover {
  background-color: #f5f5f5;
}
/* 激活类，控制下拉显示 */
.season-options.show {
  display: block;
}

3. 添加JS交互逻辑 #

实现点击切换下拉显示、点击页面其他区域自动收起的效果：

const seasonTrigger = document.querySelector('.season-trigger')
const seasonOptions = document.querySelector('.season-options')

// 点击Season链接切换下拉状态
seasonTrigger.addEventListener('click', function(e) {
  // 如果需要保留点击Season跳转archive.html的逻辑，删掉下面这行即可
  e.preventDefault()
  seasonOptions.classList.toggle('show')
})

// 点击页面其他区域收起下拉
document.addEventListener('click', function(e) {
  if (!e.target.closest('.season-dropdown')) {
    seasonOptions.classList.remove('show')
  }
})

可选纯CSS方案（不推荐用于复杂场景） #

如果不想写JS，也可以通过:focus伪类实现简单点击显示效果，不需要额外加JS代码，只需要给Season的a标签加tabindex="0"属性，再添加如下CSS即可：

.season-trigger:focus + .season-options {
  display: block;
}

缺点是点击下拉选项时会触发a标签失焦，下拉会直接收起，仅适合不需要点击下拉项跳转的场景。

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