element.classList.toggle () не работает

Question

Я пытался заставить мою форму показываться и скрываться при нажатии на кнопку, но она не работает. Я хочу использовать vanilla javascript и пытался заставить его работать с .classList.toggle (), но он работает.

HTML

<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");
})

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

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

#search-input {
  display: none;
}

.show {
  display: block;
}

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

Answer 1

CSS Специфичность

Идентификатор имеет большую специфичность, чем класс. Вы увидите, что в консоли класс будет выцарапан на панели правил при проверке элемента.

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>

Answer 2

Я думаю, что вы можете управлять этим только с помощью класса скрытия и переключать его. Попробуйте следующее.

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

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

.hide{
  display: none;
}

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

Answer 3

Это происходит потому, что в стиле CSS #id приоритет выше, чем у .class. Вы можете исправить это, добавив !important к стилю .show, например:

DEMO:

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

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

#search-input {
  display: none;
}

.show {
  display: block!important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"/>
<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>

!important - это означает, по сути, то, что он говорит; что ' this важно, игнорируйте последующие правила и любые обычные проблемы специфичности, примените this rule!'

Answer 4

Вы можете попробовать следующий способ:

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

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

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

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

Answer 5

Весь ваш код правильный. Это происходит из-за специфики CSS. Поскольку вы добавляете CSS к элементу через ID , а затем пытаетесь перезаписать это CSS, добавив дополнительные CSS через класс , это не работает , Это происходит потому, что идентификаторы получают приоритет над классами .

Это можно исправить, указав более точные значения c с помощью селекторов CSS:

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

ИЛИ

Если вы хотите общее решение для всех элементов с классом .show, вы можете сделать это, дав #search-input класс «скрыть» и просто дать классу .hide свойство display: none:

HTML

<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." class="hide"> 
</form>

CSS

.hide {
   display: none;
}
.show {
  display: block;
}

Вы можете рассчитать CSS специфичность с помощью этого изящного инструмента .