浏览器在HTML元素中删除或添加类后未更新

Question

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

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并在onclik标记中调用方法span，但它也具有相同的行为。

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更改为此，然后查看是否可行。