如何实现可展开搜索框的收起功能？当前仅能展开无法收起

你的核心问题在于当前代码只实现了搜索框的展开逻辑，没有判断状态来切换收起操作，同时打字机效果的计数器i不会重置，导致再次点击时无法正常触发效果。下面是纯原生JS的解决方案，不用jQuery：

修改后的完整代码 #

HTML（无需改动） #

<div class="search-contain">
    <i class="search fa fa-search" id="search-btn"></i>
    <input type="text" id="search" placeholder="">
</div>

JS代码 #

const searchBtn = document.getElementById('search-btn');
const search = document.getElementById('search');
// 跟踪搜索框展开状态
let isExpanded = false;
// 打字机相关变量
let i = 0;
const message = 'Semesterfest';
const speed = 100;

searchBtn.addEventListener('click', () => {
    if (!isExpanded) {
        // 展开逻辑
        search.style.width = '80%';
        search.style.paddingLeft = '60px';
        search.style.cursor = 'text';
        search.focus();
        // 重置打字机状态，确保每次展开都能从头开始
        i = 0;
        search.setAttribute('placeholder', '');
        typewriter();
        isExpanded = true;
    } else {
        // 收起逻辑
        search.style.width = '0';
        search.style.paddingLeft = '0';
        search.style.cursor = 'default';
        search.blur();
        // 清空输入内容和占位符
        search.value = '';
        search.setAttribute('placeholder', '');
        // 重置状态和计数器
        isExpanded = false;
        i = 0;
    }
})

function typewriter(){
    if(i < message.length){
        const msg = search.getAttribute('placeholder') + message.charAt(i);
        search.setAttribute('placeholder', msg);
        i++;
        setTimeout(typewriter, speed);
    }
}

补充基础CSS（优化动画流畅度） #

如果你的CSS里没加过渡效果，建议加上让展开/收起更自然：

.search-contain {
    position: relative;
    width: fit-content;
}
#search {
    width: 0;
    padding-left: 0;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}
#search-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

关键改动说明 #

• 新增isExpanded变量记录搜索框状态，点击按钮时根据状态切换展开/收起逻辑
• 收起时重置搜索框的宽度、内边距等样式到初始状态，同时清空输入内容和占位符
• 每次展开前重置打字机计数器i和占位符，确保效果能从头触发
• 补充的CSS添加了过渡动画，让展开/收起的过程更平滑

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