Bootstrap 5.2手风琴中<a>标签文本搜索功能失效求助

原代码存在的问题 #

• 选择器错误：document.querySelectorAll('.accordion')选中的是整个手风琴容器，而非单个可折叠的手风琴项（.accordion-item），无法正确遍历目标元素。
• 循环逻辑混乱：循环基于页面所有<a>标签的长度，但遍历的是手风琴容器集合，两者长度不匹配；同时循环条件i <= l.length会触发数组越界错误（索引应从0到长度-1，正确条件为i < 集合长度）。
• 元素定位错误：从错误的容器中获取<a>标签，无法定位到手风琴内容区域内的目标链接。

修复后的代码 #

JavaScript 代码

function search() {
  // 获取搜索关键词并转为大写，统一匹配规则
  let filter = document.getElementById('find').value.trim().toUpperCase();
  // 获取所有手风琴项
  let accordionItems = document.querySelectorAll('.accordion-item');
  
  // 遍历每个手风琴项
  accordionItems.forEach(item => {
    // 定位当前项内的目标<a>标签（在accordion-body内）
    let targetLink = item.querySelector('.accordion-body a');
    if (!targetLink) {
      // 无目标链接的项直接隐藏
      item.style.display = 'none';
      return;
    }
    // 获取链接文本并格式化
    let linkText = targetLink.textContent.trim().toUpperCase();
    // 判断是否匹配搜索词
    if (linkText.includes(filter)) {
      item.style.display = '';
      // 可选：自动展开匹配的手风琴项
      let collapseElement = item.querySelector('.accordion-collapse');
      if (collapseElement) {
        new bootstrap.Collapse(collapseElement, { toggle: true });
      }
    } else {
      item.style.display = 'none';
    }
  });
}

HTML 代码（无需修改，保持原结构即可）

<!-- search start -->
<div class="container text-center">
    <form class="row justify-content-md-center">
        <div class="col-12 ps-4 ">
            <label for="inputvideo" class="visually-hidden ">search</label>
            <input type="text" id="find" class="form-control mb-3" aria-label="Search" onkeyup="search()" placeholder="search">
         </div>
    </form>
</div>
<!-- search end -->

<p>category :</p>
<div class="accordion accordion-flush pb-3" id="accordionFlushExample">

<!-- advice start  -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">advice
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <a href="#" class="nav-link text-dark ms-3" id="test" onclick="light(1)">1.appication</a>
            </div>
        </div>
    </div>
<!-- advice end-->
</div>

关键修改说明 #

1. 修正元素选择：改用.accordion-item获取每个独立的手风琴项，确保遍历目标正确。
2. 简化循环逻辑：使用forEach遍历手风琴项，避免索引越界问题。
3. 精准定位链接：通过.accordion-body a选择器直接定位到手风琴内容里的目标链接，避免误选其他元素。
4. 增加容错处理：判断是否存在目标链接，防止因无链接项导致的报错。
5. 可选展开功能：匹配到关键词时自动展开对应手风琴项，提升用户体验。

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