如何为现有onClick事件添加下拉过渡动画？

问题核心 #

你已经实现了下拉菜单的显示/隐藏逻辑，但因为用了display: none和display: grid切换，CSS过渡动画无法生效——display属性不支持过渡，所以要换成能过渡的属性来控制显示隐藏。

解决方案步骤（新手友好） #

我们用max-height控制高度变化（模拟展开收起），opacity控制透明度，配合CSS过渡动画，同时调整定位让菜单真的从按钮下方展开。

1. 调整CSS（关键修改） #

把原来依赖display的逻辑换成max-height+opacity，同时修正定位：

/* dropdown button */
.dropbtn {
  color: black;
  background: none; /* 修正原语法错误，background-color:none无效 */
  font-size: 18px;
  border: thin solid darkgray;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  padding: 8px 12px; /* 增加内边距，提升点击体验 */
}

/* 下拉容器定位 */
.dropdown {
  position: relative; /* 让下拉内容相对它定位 */
  display: inline-block; /* 多按钮布局时保持横向排列 */
}

.page {
  height: 22.5px;
  padding: 4px 8px; /* 扩大点击区域 */
}

/* 下拉内容容器 */
.dropdown_content {
  /* 移除display:none，改用以下属性控制隐藏 */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  position: absolute; /* 脱离文档流，紧贴按钮下方 */
  background-color: orange;
  top: 100%; /* 定位在按钮底部 */
  right: 0;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  width: 225px;
  z-index: 1;
  /* 同时过渡高度和透明度，动画更自然 */
  transition: max-height 0.7s ease, opacity 0.3s ease;
}

/* 下拉链接样式 */
.dropdown_content a {
  color: black;
  border-top: .5px solid black;
  border-bottom: .5px solid black;
  text-decoration: none;
  display: block; /* 链接占满整行，点击区域更大 */
  padding: 6px 10px; /* 增加内边距，提升视觉体验 */
}

/* 链接 hover 效果 */
.dropdown_content a:hover {
  background-color: orangered;
}

/* 显示下拉菜单的类 */
.show {
  opacity: 1; /* 完全显示 */
  max-height: 500px; /* 设足够大的值，容纳所有内容 */
  display: grid; /* 保留原布局需求，不需要可删除 */
}

CSS修改说明： #

• 去掉display: none：它会直接隐藏元素，打断过渡动画；
• 用opacity:0+max-height:0隐藏菜单：这两个属性都支持CSS过渡；
• position:absolute：让下拉菜单紧贴按钮下方，视觉上呈现"从按钮展开"的效果；
• 修正background-color:none语法错误：改为background:none；
• 增加内边距：提升交互体验，扩大点击区域。

2. 修正JavaScript中的小错误 #

你的JS里有个语法错误：else{pass;}——JavaScript没有pass关键字，改成空的else{}即可，否则会报错。其他逻辑无需大改，仍通过添加/移除show类触发动画。

修改后的完整JS：

var previousPage = null;
var currentPage = null;

function dropDown(dropdownId) {
    var dropdownContents = document.getElementsByClassName("dropdown_content");
    var dropdownContent = document.getElementById(dropdownId);
    
    // 点击其他按钮时关闭已展开的下拉
    for (var i = 0; i < dropdownContents.length; i++) {
        var dropdown = dropdownContents[i];
        if (dropdown.classList.contains('show') && dropdown !== dropdownContent) {
            dropdown.classList.remove('show');   
        }
    }

    dropdownContent.classList.toggle("show");
}

window.addEventListener("keydown", function(event){
    if (event.key === 'Escape'){
        var dropdownContents = document.getElementsByClassName("dropdown_content");

        for (let i=0; i < dropdownContents.length; i++){
            dropdownContent = dropdownContents[i];
            if (dropdownContent.classList.contains('show')){
                if (!dropdownContents[i].contains(event.target)){
                    dropdownContents[i].classList.remove('show');
                }
            }
        }
    }
    else{
        // 移除无效的pass语句
    }
});

window.addEventListener("click", function(event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdownContents = document.getElementsByClassName("dropdown_content");
        
        for (var i = 0; i < dropdownContents.length; i++) {
            var dropdownContent = dropdownContents[i];
            if (dropdownContent.classList.contains('show') && !dropdownContent.contains(event.target)) {
                dropdownContent.classList.remove('show');
            }
        }
    }

    if (event.target.matches('.page')) {
        event.stopPropagation();
        if (event.target === currentPage) {
            event.target.style.backgroundColor = '';
            currentPage = null;
        } else {
            if (currentPage) {
                currentPage.style.backgroundColor = '';
            }
            event.target.style.backgroundColor = 'orangered';
            currentPage = event.target;
        }
    }
});

window.addEventListener("DOMContentLoaded", function() {
    var dropdownContents = document.getElementsByClassName("dropdown_content");

    for (var i = 0; i < dropdownContents.length; i++) {
        var dropdownContent = dropdownContents[i];
        var links = dropdownContent.getElementsByTagName("a");

        // 转换为数组以便排序
        var linksArray = Array.from(links);

        // 数字+字母混合排序逻辑
        linksArray.sort(function(a, b) {
            var textA = a.textContent;
            var textB = b.textContent;

            // 检测文本末尾的数字
            var regex = /\d+$/;
            var matchA = textA.match(regex);
            var matchB = textB.match(regex);

            if (matchA && matchB) {
                // 先比较数字
                var numberA = parseInt(matchA[0]);
                var numberB = parseInt(matchB[0]);
                if (numberA === numberB) {
                    // 数字相同则按字母排序
                    var remainingTextA = textA.slice(0, matchA.index).trim();
                    var remainingTextB = textB.slice(0, matchB.index).trim();
                    return remainingTextA.localeCompare(remainingTextB);
                } else {
                    return numberA - numberB;
                }
            } else {
                return textA.localeCompare(textB);
            }
        });

        // 清空原有链接避免重复
        while (dropdownContent.firstChild) {
            dropdownContent.firstChild.remove();
        }

        // 添加排序后的链接
        for (var j = 0; j < linksArray.length; j++) {
            dropdownContent.appendChild(linksArray[j]);
        }
    }
});

3. 效果说明 #

现在点击按钮时，菜单会从max-height:0平滑过渡到max-height:500px，同时透明度从0变为1，视觉上呈现从按钮下方"展开"的效果；关闭时（点击其他区域、按ESC、再次点击按钮）则平滑收起。

额外提示 #

如果下拉菜单内容特别多，可以把max-height的值调大（比如800px），确保所有内容都能显示；若需要滚动条，可在.dropdown_content中添加overflow:auto。

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