展開文本搜索的所有可摺疊部分

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

我最終弄清楚該怎麼做。剛剛修改了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]);  
    } 
    } 
}) 

有可能對方的回答也可能已經工作，但我沒有嘗試它自己，因爲我已經找到了有效的解決方案。

Answer 2

這應該可以做到。代碼中的註釋。

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