如何通过CSS和JavaScript实现select下拉菜单平滑展开？

原生的<select>下拉菜单是浏览器提供的原生控件，它的下拉面板属于系统级UI组件，并不在页面DOM树中，所以无法直接通过CSS或JavaScript为它添加平滑展开动画——浏览器限制了对这部分原生控件样式和过渡效果的自定义。

如果你需要平滑展开的下拉菜单，只能通过HTML、CSS和JavaScript模拟一个自定义下拉组件，具体实现如下：

1. HTML结构 #

用普通DOM元素模拟下拉容器、触发按钮和选项列表：

<div class="custom-select">
  <button class="select-trigger">1</button>
  <ul class="options-list">
    <li data-value="1">1</li>
    <li data-value="2">2</li>
    <li data-value="3">3</li>
  </ul>
</div>

2. CSS样式 #

通过max-height配合transition实现平滑展开/收起效果：

.custom-select {
  position: relative;
  width: 100px;
}

.select-trigger {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.options-list.open {
  max-height: 150px; /* 根据选项数量调整合适的高度 */
}

.options-list li {
  padding: 8px;
  cursor: pointer;
}

.options-list li:hover {
  background-color: #f0f0f0;
}

3. JavaScript交互逻辑 #

处理下拉展开/收起、选项选择以及外部点击关闭的逻辑：

const trigger = document.querySelector('.select-trigger');
const optionsList = document.querySelector('.options-list');
const options = document.querySelectorAll('.options-list li');

// 点击触发按钮切换下拉状态
trigger.addEventListener('click', () => {
  optionsList.classList.toggle('open');
});

// 选择选项后更新显示文本并收起下拉
options.forEach(option => {
  option.addEventListener('click', () => {
    trigger.textContent = option.textContent;
    optionsList.classList.remove('open');
    // 这里可根据需求处理选中值，比如提交表单、触发其他逻辑
    console.log('选中的值:', option.dataset.value);
  });
});

// 点击页面其他区域自动收起下拉
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-select')) {
    optionsList.classList.remove('open');
  }
});

这种自定义组件完全由页面DOM元素构成，所有样式和过渡效果都能自由控制，完美实现平滑展开的需求。

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