如何基于自定义下拉菜单的选中选项展示不同内容？

实现方案 #

你可以按照以下逻辑修改代码实现选中下拉项后切换对应展示内容：

1. 给下拉菜单项和下方内容块增加关联标识，方便点击菜单项时快速匹配到对应要展示的内容
2. 新增CSS规则默认隐藏所有内容块，仅激活状态的内容块展示
3. 给下拉菜单项绑定点击事件，点击时同步更新选中样式、下拉框标题，同时切换对应展示内容
4. 初始化时默认展示第一个选项对应的内容

修改后的HTML代码 #

<main>
  <div class="dropdown-select closed">
    <div class="dropdown-select__title">
      <h6>Other Releases</h6>
      <img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret ">
    </div>
    <ul class="menu">
      <li data-content-id="1">Fall 2021</li>
      <li data-content-id="2">Summer 2021</li>    
    </ul>
  </div>
  <div class="tabbed-content">
    <div id="1" class="content-item">Fall 2021</div>
    <div id="2" class="content-item">Summer 2021</div>    
  </div>  
</main>

新增CSS规则（追加到原有CSS末尾即可） #

/* 默认隐藏所有内容项 */
.tabbed-content .content-item {
  display: none;
}
/* 激活状态的内容项展示 */
.tabbed-content .content-item.active {
  display: block;
}
/* 选中的下拉项样式 */
.dropdown-select .menu li.active {
  color: purple;
}

修改后的JS代码 #

let dropdown = document.querySelector('.dropdown-select');
const menuItems = dropdown.querySelectorAll('.menu li');
const contentItems = document.querySelectorAll('.tabbed-content .content-item');
const dropdownTitle = dropdown.querySelector('.dropdown-select__title h6');

// 初始化默认选中第一个选项
function init() {
  switchContent(menuItems[0]);
}
init();

// 下拉框展开/收起逻辑
dropdown.addEventListener('click', (e) => {
  // 点击菜单项时不在这里处理收起，等内容切换完成后统一处理
  if(e.target.closest('.menu li')) return;
  dropdown.classList.toggle('closed');
});

// 菜单项点击切换逻辑
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    switchContent(item);
    // 内容切换完成后收起下拉框
    dropdown.classList.add('closed');
  })
})

// 切换内容公共方法
function switchContent(selectedItem) {
  // 清除所有激活状态
  menuItems.forEach(i => i.classList.remove('active'));
  contentItems.forEach(c => c.classList.remove('active'));
  // 给当前选中项添加激活样式
  selectedItem.classList.add('active');
  // 更新下拉框标题为选中值
  dropdownTitle.textContent = selectedItem.textContent;
  // 展示对应内容块
  const targetId = selectedItem.dataset.contentId;
  document.getElementById(targetId).classList.add('active');
}

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