Question

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

作为一种潜在的解决方法，我想我可以尝试为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
  }

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

我没有写这个页面的原始代码。我可以使用不同的代码重写整个页面，但是我希望有一个更简单的解决方案，因为实时页面有更多的部分，并且我需要花费很多时间来重写所有内容。我在这里https://jsfiddle.net/felipeseiber/886p4eps/创建了一个简化的页面示例（删除所有主要内容以制作较小的样本）。

Answer 1

这应该可以解决问题。代码中的评论。

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');
      }
    }
  }
})

Answer 2

我最终搞清楚要做什么。刚刚将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]);    
    }
  }
})

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

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

2 个答案: