在搜索栏上点击

Question

我试图隐藏一个容器时，搜索栏被点击，但页面重新加载，容器再次显示。

代码在

下面

<div class="search">
<form action="" method="GET">
<input type="text" name="search" value="" placeholder="search member..">
<button class="search_btn">
<i class="fas fa-search" style="font-size: 18px;"></i>
</button>
</form>
</div>

添加hide类的javascript

const search_btn=document.querySelector(".search_btn");
const content=document.querySelector(".content");
search_btn.addEventListener("click", search);
let se=false;
function search(){
if(!se){
content.classList.add("hide");
se=true;
}else{
content.classList.remove("hide");
se=false;
}
}

和它的CSS部分如下

.container .content.hide{
display:none;
}   
.container .content{  
display: block;
margin: 20px;
background: #f2f5f9;
}

Answer 1

页面正在重新加载，因为您的代码包含表单，当您点击搜索时，您实际上提交了表单。你可以使用event.preventDefault()来阻止它。

function search(event){
if(!se){
content.classList.add("hide");
se=true;
}else{
content.classList.remove("hide");
se=false;
}
event.preventDefault()
}