我正在尝试编写一些扩展搜索栏,它应该在点击按钮后展开,并在点击输入字段以外的其他地方后折叠。 问题是一切正常,除了在第二个脚本设置显示后:无当我点击周围的任何地方时,第一个脚本在我点击按钮后不会启动。我尝试了很多代码变体,但它也不起作用,而且我不知道该怎么做,我想我只是不明白 JS 在这里是如何工作的,所以如果有人能帮助它,那就太好了:]。 下面链接到带代码的codepen
document.getElementById("searchButton").addEventListener("click", function(){
document.getElementById("userInputWindow").classList.toggle("userInputAnimationToggle");
});
document.addEventListener("click", function(event){
let i = document.getElementById("userInputWindow");
let k = document.getElementById("searchButton");
if(event.target !== i && event.target !== k)
{
document.getElementById("userInputWindow").classList.add("userInputAnimationToggle1");
}
if(event.target !== i){
document.getElementById("userInputWindow").value = "";
}
});
.searchBoxWrapper{
position: absolute;
margin: 40px auto;
text-align: center;
left: 50%;
}
button{
position:absolute;
width: 100px;
height: 100px;
margin-bottom: 5rem;
padding: 10px;
background-color: grey;
border: 2px solid orange;
border-radius: 100px;
font-size: 1rem;
transform: translate(-50%, 0);
z-index: 2;
}
.userInput{
position: absolute;
display: block;
width: 0;
padding: 15px;
border-radius: 40px;
background-color: grey;
border: 2px solid orange;
transform: translateY(50%);
left: 20px;
z-index: 1;
text-align:center;
transition: all 1s ease;
}
.userInput::placeholder{
font-size: 2rem;
}
.userInputAnimationToggle{
width: 150px;
display: block;
}
.userInputAnimationToggle1{
display: none;
}
<div class = "searchBoxWrapper">
<button class = "openSearchButton" id = "searchButton" type = "button" title = "Open Search window">Search</button>
<input class = "userInput" value="" type = "text" id = "userInputWindow" placeholder = " for item"/>
</div>
最佳答案
您需要删除在 hide 期间设置的 css 类 userInputAnimationToggle1
。我还编辑了 userInputAnimationToggle1
css 值,这样搜索将返回到原始状态
document.getElementById("searchButton").addEventListener("click", function(){
document.getElementById("userInputWindow").classList.remove("userInputAnimationToggle1");
document.getElementById("userInputWindow").classList.toggle("userInputAnimationToggle");
});
document.addEventListener("click", function(event){
let i = document.getElementById("userInputWindow");
let k = document.getElementById("searchButton");
if(event.target !== i && event.target !== k)
{
document.getElementById("userInputWindow").classList.add("userInputAnimationToggle1");
}
if(event.target !== i){
document.getElementById("userInputWindow").value = "";
}
});
.searchBoxWrapper{
position: absolute;
margin: 40px auto;
text-align: center;
left: 50%;
}
button{
position:absolute;
width: 100px;
height: 100px;
margin-bottom: 5rem;
padding: 10px;
background-color: grey;
border: 2px solid orange;
border-radius: 100px;
font-size: 1rem;
transform: translate(-50%, 0);
z-index: 2;
}
.userInput{
position: absolute;
display: block;
width: 0;
padding: 15px;
border-radius: 40px;
background-color: grey;
border: 2px solid orange;
transform: translateY(50%);
left: 20px;
z-index: 1;
text-align:center;
transition: all 1s ease;
}
.userInput::placeholder{
font-size: 2rem;
}
.userInputAnimationToggle{
width: 150px;
display: block;
}
.userInputAnimationToggle1{
position: absolute;
display: block;
width: 0;
padding: 15px;
border-radius: 40px;
background-color: grey;
border: 2px solid orange;
transform: translateY(50%);
left: 20px;
z-index: 1;
text-align:center;
transition: all 1s ease;
}
<div class = "searchBoxWrapper">
<button class = "openSearchButton" id = "searchButton" type = "button" title = "Open Search window">Search</button>
<input class = "userInput" value="" type = "text" id = "userInputWindow" placeholder = " for item"></input>
</div>
关于使用其他脚本后,Javascript 脚本不运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52926700/