试着让搜索栏显示当你点击按钮？

Question

我想做的是，当用户点击搜索按钮时，搜索栏就会显示出来。但出于某种原因，它只是不起作用，我不知道，为什么？我反复检查了一下https://www.w3schools.com/jsref/event_onclick.asp，只是为了确保我做得对，但没有用。我尝试了无法工作的add.eventlistner，因为它将onclick="showBar()"应该在JS中看到按钮的按钮视为null。

HTML

<button onclick="showBar()" class="btn btn-outline-success" type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>

CSS

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none !important;
}

JS

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.display = "block";
}

Answer 1

您的问题是您正在使用!important在display: none of .me-2上。

您不应该在样式中使用!important，除非您想永久地隐藏它。

​

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.display = "block";
}

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none; /*Removed !important*/
}

<button onclick="showBar()" class="btn btn-outline-success" type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>

​

如果您由于某种原因无法摆脱!important的话。您可以尝试在Javascript中将!important添加到.me-2中，这将覆盖CSS中的!important。

​

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.setProperty('display','block','important');
}

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none !important;
}

<button onclick="showBar()" class="btn btn-outline-success" type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>

​