Javascript 展开所有可折叠部分以进行文本搜索

我们有一个包含折叠列表项的现有页面。问题是，如果有人试图搜索页面上的文本，则找不到当前折叠的任何项目的结果。我已经搜索过了，但浏览器似乎无法搜索到折叠的项目

作为一种潜在的解决方法，我想我可以尝试为Ctrl+F键添加一个侦听器，然后打开所有折叠的项目（如果有更好的解决方案，请告诉我）。这将允许搜索文本

window.addEventListener("keydown", function(e) {
  if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
    document.getElementById('accordion1').click();
    //would like to make all accordians expand when Ctrl+F is pressed so that content can be searched
  }

虽然我可以为按键添加一个监听器（使用上面的代码），但我似乎不知道如何打开所有折叠的元素

---

我没有为此页面编写原始代码。我可以用不同的代码重写整个页面，但我希望有一个更简单的解决方案，因为live页面有更多的部分，我需要花费很多时间来重写所有内容。我在这里创建了一个简化的页面示例（删除了所有主要内容以制作一个较小的示例）。

这应该可以做到。代码中的注释

window.addEventListener("keydown", function(e) {
  if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
    // Store all accordion trigger elements
    var d = document,
    accordionToggles = d.querySelectorAll('.js-accordionTrigger');
    // loop through all accordion trigger elements
    for (var i = 0, len = accordionToggles.length; i < len; i++) {
      // store the current iterated accordion tigger element and content
      var thisAnswer = accordionToggles[i].parentNode.nextElementSibling;
      var thisQuestion = accordionToggles[i];
      // check if current iterated accordion content has a class of "is-collapsed".
      if (thisAnswer.classList.contains('is-collapsed')) {
        // toggle current iterated accordion trigger and content classes if condition is met
        thisQuestion.classList.toggle('is-collapsed');
        thisQuestion.classList.toggle('is-expanded');
        thisAnswer.classList.toggle('is-collapsed');
        thisAnswer.classList.toggle('is-expanded');
        thisAnswer.classList.toggle('animateIn');
      }
    }
  }
})

window.addEventListener（“向下键”，函数（e）{
如果（e.keyCode==114 | |（e.ctrlKey&&e.keyCode==70））{
//存储所有手风琴触发元素
var d=文件，
accordionToggles=d.querySelectorAll（'.js accordionTrigger'）；
//循环通过所有手风琴触发元件
对于（变量i=0，len=accordiontogles.length；i

我终于想出了该怎么办。只需将JS修改为以下内容，就可以了

(function() {
  var d = document,
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
    setAria,
    setAccordionAria,
    switchAccordion,
    touchSupported = ('ontouchstart' in window),
    pointerSupported = ('pointerdown' in window);
  skipClickDelay = function(e) {
    e.preventDefault();
    e.target.click();
  }

  setAriaAttr = function(el, ariaType, newProperty) {
    el.setAttribute(ariaType, newProperty);
  };

  setAccordionAria = function(el1, el2, expanded) {
    switch (expanded) {
      case "true":
        setAriaAttr(el1, 'aria-expanded', 'true');
        setAriaAttr(el2, 'aria-hidden', 'false');
        break;
      case "false":
        setAriaAttr(el1, 'aria-expanded', 'false');
        setAriaAttr(el2, 'aria-hidden', 'true');
        break;
      default:
        break;
    }
  };

  switchAccordion = function(e) {
    console.log("triggered");
    e.preventDefault();
    var thisAnswer = e.target.parentNode.nextElementSibling;
    var thisQuestion = e.target;
    if (thisAnswer.classList.contains('is-collapsed')) {
      setAccordionAria(thisQuestion, thisAnswer, 'true');
    } else {
      setAccordionAria(thisQuestion, thisAnswer, 'false');
    }
    thisQuestion.classList.toggle('is-collapsed');
    thisQuestion.classList.toggle('is-expanded');
    thisAnswer.classList.toggle('is-collapsed');
    thisAnswer.classList.toggle('is-expanded');
    thisAnswer.classList.toggle('animateIn');
  };

  expandAccordion = function(target) {
    console.log("triggered");
    var thisAnswer = target.parentNode.nextElementSibling;
    var thisQuestion = target;
    if (thisAnswer.classList.contains('is-collapsed')) {
      setAccordionAria(thisQuestion, thisAnswer, 'true');
      thisQuestion.classList.toggle('is-collapsed');
      thisQuestion.classList.toggle('is-expanded');
      thisAnswer.classList.toggle('is-collapsed');
      thisAnswer.classList.toggle('is-expanded');
      thisAnswer.classList.toggle('animateIn');
    }
  };

  for (var i = 0, len = accordionToggles.length; i < len; i++) {
    if (touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if (pointerSupported) {
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();

window.addEventListener("keydown", function(e) {
  if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
    //document.getElementById('accordion1').click();
    //alert("Expand all collapsed sections for search");
    //would like to make all accordians expand when Ctrl+F is pressed so that content can be searched
    var accordionToggles = document.querySelectorAll('.js-accordionTrigger');
    for (var i = 0, len = accordionToggles.length; i < len; i++) {
            expandAccordion(accordionToggles[i]);    
    }
  }
})

（函数（）{
var d=文件，
accordionToggles=d.querySelectorAll（'.js accordionTrigger'），
狗尾草，
Set手风琴，
手风琴，
touchSupported=（窗口中的“ontouchstart”），
pointerSupported=（“pointerdown”在窗口中）；
skipClickDelay=功能（e）{
e、 预防默认值（）；
e、 target.click（）；
}
setAriaAttr=函数（el、ariaType、newProperty）{
el.setAttribute（ariaType，newProperty）；
};
SetAccordinaria=函数（el1、el2、扩展）{
交换机（扩展）{
案例“真”：
setAriaAttr（el1，'aria expanded'，'true'）；
setAriaAttr（el2，'aria hidden'，'false'）；
打破
案例“假”：
setAriaAttr（el1，'aria expanded'，'false'）；
setAriaAttr（el2，'aria hidden'，'true'）；
打破
违约：
打破
}
};
开关手风琴=功能（e）{
控制台日志（“已触发”）；
e、 预防默认值（）；
var thisAnswer=e.target.parentNode.nextElementSibling；
var thisQuestion=e.target；
if（thisAnswer.classList.contains（'is-collapsed'））{
SetAccordinaria（这个问题，这个答案，'正确'）；
}否则{
SetAccordinaria（这个问题，这个答案，'假'）；
}
thisQuestion.classList.toggle（'is-collapsed'）；
thisQuestion.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'is-collapsed'）；
thisAnswer.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'animateIn'）；
};
expandAccordion=功能（目标）{
控制台日志（“已触发”）；
var thisAnswer=target.parentNode.nextElementSibling；
问题=目标；
if（thisAnswer.classList.contains（'is-collapsed'））{
SetAccordinaria（这个问题，这个答案，'正确'）；
thisQuestion.classList.toggle（'is-collapsed'）；
thisQuestion.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'is-collapsed'）；
thisAnswer.classList.toggle（'is-expanded'）；
thisAnswer.classList.toggle（'animateIn'）；
}
};
对于（变量i=0，len=accordiontogles.length；i

另一个答案也可能有效，但我自己没有尝试，因为我找到了一个有效的解决方案