我在代码中有一个切换功能，当点击时，会显示一个ul块，当再次点击时，ul块会消失。我将这个功能与一个名为search and filter pro的WordPress插件结合使用。
当我选择一个过滤器时，插件中的一些 AJAX 会运行，所以我必须声明AJAX运行完成后代码要做什么，所以我再次放入我的函数。

原始功能

function pageFunctions() {
    // CHECKING ON AVAILABILITY OF VANS

    let singleVan = document.querySelector('.single-vans')
    let numberFilters = document.querySelector('.number-of-filters p')
    let count = 0;

    let availability = document.querySelectorAll('.availability')
    let content = document.querySelectorAll('.vans')

    // HIDING AND SHOWING FILTER OPTIONS
    let filter = document.querySelectorAll('.searchandfilter ul li h4')
    let filterBlock = document.querySelectorAll('.searchandfilter li ul')
    let filterLi = document.querySelectorAll('[data-sf-meta-type="choice"]')

    filter.forEach( (tag, index) => {
        tag.addEventListener('click', ()=>{
           console.log('clicked')
           filterLi[index].classList.toggle('active')
           if (!filterLiOpen[index]) {
           filterLiOpen[index] = true;
           }
           else if (filterLiOpen[index]) {
            filterLiOpen[index] = false;
           }
           console.log(filterLiOpen)
        })
    })
}

AJAX 之后会发生什么

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        pageFunctions();
  });
}(jQuery));

我假设这两个函数都在运行，所以它们通过切换相互抵消，但我不确定。我如何才能防止这种情况发生？
值得注意的是，它的工作完全正常，直到我向下滚动刷新更多的结果，之后，切换停止工作。任何帮助将不胜感激。
示例：https://snapstaging.co.uk/coolkitnew/vans/