由 javascript 添加的类但未应用 css？

Question

我将使用 javascript 和 css 创建一个切换菜单 类 .menu-slider 添加了属性显示块。但它不起作用，只有类 teggled 和 css 未应用 这是代码

               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";
               }
               });
            </script>
<style>
.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;
}
.menu-slier{
    display: block;
    transition-duration: 500ms;
}
</style>'''

Answer 1

也许事实是，在你的 JS 中你要切换

menu-slider

类，但在 css 中你有

.menu-slier