element.classList.toggle() 不起作用

Question

我一直试图让我的表单在单击按钮时显示和隐藏，但它不起作用。我想使用普通的 javascript，并一直试图让它工作，.classList.toggle()但它正在工作。

超文本标记语言

<i id="search-button"class="fa fa-laptop fa-2x"></i>
<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." > 
</form>

CSS

#search-input{
  display: none;
}
.show{
  display: block;
}

JS

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

<i id="search-button"class="fa fa-laptop fa-2x"></i>
<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." > 
</form>

#search-input{
  display: none;
}
.show{
  display: block;
}

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

Answer 1

CSS 特异性

ID 比类具有更大的特异性。您会在控制台中看到，当您检查元素时，类将在规则窗格中被划掉。

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

#search-input{
  display: none;
}
#search-input.show{
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i id="search-button"class="fa fa-laptop fa-2x"></i>
<form id="search-form">
     <input id="search-input" type="text" name="search" placeholder="Search.."> 
</form>