伸缩搜索框,

🗣 SL提问: 伸缩搜索框

✍️ Ai批改: 创建一个可以伸缩的搜索框可以通过CSS和JavaScript实现。下面是一个简单的例子，展示如何制作一个具有伸缩功能的搜索框。当用户点击搜索图标时，搜索框会展开或收缩。

HTML结构

html
<div class=search-container
<input type=text id=search-input placeholder=搜索...
<button id=search-btn<i class=fa fa-search</i</button
</div

CSS样式

css
.search-container {
position: relative;
display: flex;
align-items: center;
}

search-input {
width: 0px;
padding: 5px;
border: none;
border-radius: 5px 0 0 5px;
transition: width 0.4s ease-in-out;
}

search-input.expand {
width: 200px; /* 展开后的宽度 */
padding: 5px;
border: 1px solid ccc;
}

search-btn {
background-color: 007bff;
color: white;
border: none;
padding: 6px 10px;
border-radius: 0 5px 5px 0;
cursor: pointer;
}

search-btn:hover {
background-color: 0069d9;
}

JavaScript交互

javascript
document.getElementById('search-btn').addEventListener('click', function() {
var searchInput = document.getElementById('search-input');
searchInput.classList.toggle('expand');
if (searchInput.classList.contains('expand')) {
searchInput.focus(); // 获取焦点
}
});

说明

1、HTML结构: 我们使用一个`div`包裹`input`和`button`，`input`用于输入搜索内容，`button`包含一个搜索图标（这里使用了Font Awesome图标库，你可以根据需要替换成其他图标或文字）。

2、CSS样式: 初始状态下，`input`的宽度为0，不可见。当它拥有`expand`类时，宽度变为200px（可以根据需要调整），并且显示出来。`transition`属性使得宽度变化时有一个平滑的过渡效果。

3、JavaScript交互: 点击搜索按钮时，JavaScript代码会切换`input`元素的`expand`类，从而实现展开和收缩的效果。如果`input`展开，则自动获得焦点，方便用户输入。

这个简单的伸缩搜索框示例可以根据实际项目的需求进行调整和扩展。