Laravel Blade模板中JS筛选导致折叠行功能失效的问题求助

你遇到的是JS筛选操作破坏了Bootstrap折叠组件的事件绑定——当筛选隐藏/显示表格行时，Bootstrap原本绑定在折叠触发器上的collapse事件监听失效了，原因大多是筛选逻辑直接修改了DOM的display属性，或是动态操作DOM导致组件失去绑定。

1. 用Bootstrap自带类控制行的显示/隐藏 #

别直接用style.display切换行的显示状态，改用Bootstrap的d-none类：

// 隐藏行
row.classList.add('d-none');
// 显示行
row.classList.remove('d-none');

Bootstrap的折叠组件对官方类的兼容性更好，不会因为行的显示切换丢失事件绑定。

2. 筛选后重新初始化折叠组件 #

如果你的筛选逻辑会动态添加/移除行，在筛选完成后重新初始化所有折叠触发器：

// 筛选完成后执行这段代码
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
  // 重新绑定折叠组件，toggle: false 避免自动切换状态
  new bootstrap.Collapse(trigger.getAttribute('data-bs-target'), { toggle: false });
});

这样能确保筛选后所有折叠按钮都能正常触发展开/收起。

3. 检查筛选脚本是否误改了折叠相关属性 #

排查你的筛选代码，确保：

• 折叠触发器的data-bs-target始终指向正确的折叠目标ID
• 折叠目标元素的id没被筛选逻辑修改
• 没有移除触发器或目标元素的collapse、data-bs-toggle这些关键属性和类

4. 示例代码修改 #

假设你原来的筛选脚本是这样的：

function filterTable() {
  const input = document.getElementById('filterInput');
  const filter = input.value.toUpperCase();
  const rows = document.getElementById('dataTable').getElementsByTagName('tr');

  for (let i = 0; i < rows.length; i++) {
    const td = rows[i].getElementsByTagName('td')[1];
    if (td) {
      const txt = td.textContent || td.innerText;
      rows[i].style.display = txt.toUpperCase().includes(filter) ? "" : "none";
    }
  }
}

改成用d-none类的版本：

function filterTable() {
  const input = document.getElementById('filterInput');
  const filter = input.value.trim().toUpperCase();
  const rows = document.querySelectorAll('#dataTable tr');

  rows.forEach(row => {
    const td = row.querySelector('td:nth-child(2)');
    if (td) {
      const txt = td.textContent.trim().toUpperCase();
      if (txt.includes(filter)) {
        row.classList.remove('d-none');
      } else {
        row.classList.add('d-none');
      }
    }
  });
}

这样修改后，筛选状态下折叠行的功能就能正常使用了。

内容的提问来源于stack exchange，提问作者Sotg