Javascript 脚本在使用其他脚本后运行

Question

我正在尝试编写一些扩展搜索栏，它应该在点击按钮后展开，并在点击输入字段以外的其他地方后折叠。问题是一切正常，除了在第二个脚本设置显示后： none 当我点击周围的任何地方时，第一个脚本在我点击按钮后不会启动。我尝试了很多代码变体，但它也不起作用，而且我不知道该怎么做，我想我只是不明白 JS 在这里是如何工作的，所以如果有人能帮助它，那就太好了:]。在 link 下方使用代码

进行 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 link: https://codepen.io/Mynickname/pen/jepzzX

Answer 1

您需要删除在隐藏期间设置的 css class userInputAnimationToggle1。我还编辑了 userInputAnimationToggle1 css 值，以便搜索 return 到原始状态

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

而不是添加另一个 class（即 userInputAnimationToggle1），只需删除添加的 class（即 userInputAnimationToggle）

更改以下行

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

至此

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

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

.userInputAnimationToggle1{
    display: none;
}

Javascript 脚本在使用其他脚本后运行

Javascript script doesnt run after other script have been used

html

javascript

css

web-deployment

Javascript 脚本在使用其他脚本后 运行

Javascript script doesnt run after other script have been used

html

javascript

css

web-deployment

Javascript 脚本在使用其他脚本后运行