点击搜索按钮显示搜索框功能失效 求技术排查

核心错误：CSS选择器语法错误 #

你写的active类选择器是：

.header .search-form .active{
    right: 2rem;
}

这里的空格表示选中.search-form下的子元素.active，但实际你是要给.search-form元素本身添加.active类，所以应该去掉中间的空格，改成：

.header .search-form.active{
    right: 2rem;
}

这个错误会导致点击按钮后，虽然JS成功给search-form加上了active类，但CSS找不到对应的元素，样式不会变化，搜索框自然不会显示。

额外检查点：HTML结构匹配 #

你的默认样式用了.header .search-form，意味着search-form必须是header标签的后代元素才会应用隐藏样式。如果你的search-form写在header外面，默认的right: -110%不会生效，建议调整HTML结构，把搜索框放在header内部，比如：

<header class="header">
    <div class="icons"> 
        <div class="fa fa-search" id="search-btn"></div>
    </div>
    <!-- 把搜索框移到header内部 -->
    <form class="search-form">
        <input type="text" class="search" id="search-box" placeholder="Search here...">
        <label for="search-box" class="fa fa-search"></label>
    </form>
</header>

验证JS部分（你的代码没问题） #

你的JS逻辑是正确的，确保脚本放在body闭合标签前即可：

let searchForm = document.querySelector('.search-form');

document.querySelector('#search-btn').onclick = () => {
    searchForm.classList.toggle('active');
}

按上面的修改后，点击搜索按钮就能正常显示/隐藏搜索框了。

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