单页内容搜索筛选功能代码故障排查与修复协助请求

我来帮你搞定这个页面搜索栏的问题，你的代码里确实有个致命的拼写错误，还有几个可以优化的地方，咱们一步步来解决：

1. 核心错误：DOM API调用拼写错误 #

你JavaScript里的这行代码：

className = document.Document.getElementsByClassName("vc_toggle_title");

这里多写了一个大写的Document！正确的调用应该是document.getElementsByClassName()——DOM中获取元素的方法是挂载在小写的document对象上的，大写的Document是个构造函数，根本不是你要调用的对象，这就是代码完全无法运行的原因。

2. 优化建议：隐藏整个折叠模块（而非仅标题） #

从你的页面结构来看，每个vc_toggle_title都嵌套在vc_toggle容器里，如果你只隐藏标题，页面上可能会留下残留的图标或者空容器，体验不太好。我建议修改代码，找到标题对应的父容器，直接隐藏整个折叠块。

修复后的完整代码 #

HTML（和你的原结构一致） #

<div class="wpb_raw_code wpb_content_element wpb_raw_html">
    <div class="wpb_wrapper">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Begin Typing...">
    </div>
</div>
<div class="vc_toggle vc_toggle_default vc_toggle_color_default vc_toggle_size_md">
    <div class="vc_toggle_title" style="">
        <h4>I’m interested in acquiring a bathtub with you, what should I do?</h4><i class="vc_toggle_icon"></i></div>
</div>
<div class="vc_toggle vc_toggle_default vc_toggle_color_default vc_toggle_size_md">
    <div class="vc_toggle_title" style="">
        <h4>Can the order be finished online at ellasbubbles.com?</h4><i class="vc_toggle_icon"></i></div>
</div>

JavaScript（修复+优化后） #

function myFunction() {
    // 声明变量
    var input, filter, titleElements, h4, i, txtValue, toggleContainer;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    // 修复拼写错误，获取所有标题元素
    titleElements = document.getElementsByClassName("vc_toggle_title");
    
    // 遍历所有标题，筛选匹配内容
    for (i = 0; i < titleElements.length; i++) {
        h4 = titleElements[i].getElementsByTagName("h4")[0];
        // 增加判断，避免没有h4标签时出错
        if (!h4) continue;
        
        txtValue = h4.textContent || h4.innerText;
        // 找到当前标题对应的整个折叠容器
        toggleContainer = titleElements[i].closest('.vc_toggle');
        
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            toggleContainer.style.display = "";
        } else {
            toggleContainer.style.display = "none";
        }
    }
}

额外说明 #

• 我还加了if (!h4) continue;的判断，防止某些标题没有h4标签时导致代码报错；
• 使用closest('.vc_toggle')可以快速找到当前标题的父级折叠容器，比一层层用parentNode更可靠。

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