Question

我正在尝试编写一些扩展的搜索栏，该搜索栏应在单击按钮后扩展，而在除输入字段之外的其他位置单击后合拢。问题是，一切正常，只是在第二个脚本集显示之后：当我单击任意位置时都没有，单击按钮后第一个脚本不会启动。我尝试了许多代码变体，但也不起作用，我也不知道该怎么做，我想我只是不了解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>

codepen链接：https://codepen.io/Mynickname/pen/jepzzX

Answer 1

您需要删除在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>

Answer 2

代替添加另一个类（即userInputAnimationToggle1），只需删除添加的类（即userInputAnimationToggle）

更改以下行

document.getElementById("userInputWindow").classList.add("userInputAnimationToggle1");

对此

document.getElementById("userInputWindow").classList.remove("userInputAnimationToggle");

因此您将不再需要类userInputAnimationToggle1并可以将其删除

.userInputAnimationToggle1{
    display: none;
}

使用其他脚本后，JavaScript脚本无法运行

2 个答案: