使用 Tailwind-CSS 在 HTML 元素中删除或添加类后浏览器未更新

Question

我有一个带有extendSearch id 的span 元素，单击它时应该展开或折叠带有searchSection id 的表单元素。折叠和展开基于添加或删除 css hidden 类。

Tailwind-css 之外的 CSS 代码：

.hidden {
    display: none;
}

HTML 代码

<span id="extendSearch" class="cursor-pointer px-2 font-xl mr-2">-</span>
<form id="searchSection" method="post" class="p-5 w-full md:grid md:grid-cols-3 md:gap-4">
    <label>Search</label>
    <input type="text" />
</form>

Javascript 代码

let extendSearch = document.getElementById("extendSearch");
let searchSection = document.getElementById("searchSection");

extendSearch.addEventListener('click', () => {

   if (searchSection.classList.contains('hidden')) {
       searchSection.classList.remove('hidden');
       extendSearch.innerText = "-";
    } else {
        searchSection.classList.add('hidden');
        extendSearch.innerText = "+";
    }

});

由于某种原因，当我打开开发者工具时，这段代码运行良好。即，classList 得到更新，span 元素的文本得到更新，浏览器呈现更改（表单消失并出现）。

但当开发者工具关闭时，classList 会更新，span 元素的文本也会更新，但浏览器不会呈现更改。 Chrome 和 Microsoft Edge 上的行为相同。

我尝试使用.toogle()，但行为相同。我试图删除eventListener 并在span 标记中调用方法onclik，但它也具有相同的行为。

Answer 1

您的<form> 标记上似乎缺少结束标记。我使用了您的代码并简单地添加了一个结束 </form> 标记并在表单中添加了一些内容，它对我有用。

<span id="extendSearch" class="cursor-pointer px-2 font-xl mr-2">-</span>
<form id="searchSection" method="post" class="p-5 w-full md:grid md:grid-cols-3 md:gap-4">
  <input type="text"> <button>Submit</button>
</form>

尝试将您的 HTML 更改为这个，看看它是否有效。