JavaScript添加的.menu-slider类CSS未生效问题求助

• 类名拼写错误是核心问题
  你在CSS里定义的类是.menu-slier（拼写少了字母d），但JavaScript中切换的类是menu-slider，两者不匹配，导致样式无法应用到元素上。

• 补充优化：确保样式优先级足够
  原.toggl-menu的display:none是单个类选择器，直接写.menu-slider的权重和它相同，可能出现样式覆盖问题。建议使用组合选择器.toggl-menu.menu-slider，这样权重更高，能确保覆盖原有的隐藏样式。

修正后的代码 #

CSS 修正版 #

.toggl-menu {
    display: none;
    position: absolute;
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    width: 100%;
    background-color: #ffffff;
    left: 0;    
    top: 70px;
}
/* 修正类名拼写，并用组合选择器提升权重 */
.toggl-menu.menu-slider{
    display: block;
    transition-duration: 500ms;
}

JavaScript 保持原代码即可 #

const toggleMenu = document.querySelector('.toggl-menu');
document.getElementById("toggleButton").addEventListener("click", function() {
    var button = this;
    toggleMenu.classList.toggle('menu-slider');
    button.classList.toggle("open");
    button.classList.toggle("close");
    var openIcon = button.querySelector(".open-icon");
    var closeIcon = button.querySelector(".close-icon");
    if (button.classList.contains("open")) {
        openIcon.style.display = "inline";
        closeIcon.style.display = "none";
    } else {
        openIcon.style.display = "none";
        closeIcon.style.display = "inline";
    }
});

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