试图让搜索栏显示当你点击按钮?

Question

我想做的是，当用户单击搜索按钮时，搜索栏显示。但出于某种原因，它就是不起作用，我也不知道为什么?我仔细检查过https://www.w3schools.com/jsref/event_onclick.asp只是为了确保我做得对，但无济于事。我尝试了不工作的add.eventlistner，因为它看到按钮为空，onclick="showBar()"应该看到按钮，在JS中。

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

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

你不应该在你的样式中使用!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"/>