如何将展开全部按钮添加到 javascript/HTML 项目

Question

我目前有一个页面，当您单击一个术语时，该页面的内容会扩展，但是一旦您单击一个新术语，旧术语就会关闭，而新术语会展开。 这些条款是从谷歌表格加载到页面上的。 这是在 HTML 页面上，但执行该工作的 javascript 代码如下：

// Address of the Google Sheets Database
var public_spreadsheet_url = 'sheet link here';

// Column Names from Google Sheets Database
let questionsColumn = "Question";
let answersColumn = "Answer";

window.addEventListener('DOMContentLoaded', init)   // Calls method init when Sheets has loaded

function init() {
Tabletop.init( { key: public_spreadsheet_url,
                 callback: showInfo,
                 simpleSheet: true } );
}

var unhiddenAnswer = "";

// Method that gets called when data has been pulled from Google Sheets
function showInfo(data) {
    var editButton = '<center><a style="border-bottom: none" href="' + public_spreadsheet_url + '"><button class="button admin">Edit</button></a></center>';

    // Injects the built HTML code into the div Dynamic
    document.getElementById("dynamic").innerHTML = buildFAQTable(data) + editButton;
}

// Builds the HTML Table code from the Database Data
function buildFAQTable(data) {
    var index = 0;
    var content = '<h2>Title Here</h2><div style="padding:0px 5%">';
    data.forEach(form => {
        content += '<h1 class="faq_question" onClick="unhideAnswer(' + index + ')">' + data[index][questionsColumn] + '</h1>';
        content += '<p id="answer' + index + '" class="hideAnswer">' + data[index][answersColumn] + '</p>';
        index++;
    });
  // Extends body to accomdate for tall footer on very small devices (e.g. iPhone 5/5S/SE)
  content += "<br></br><br></br>";
    return content;
}

// When a FAQ Question gets clicked on, this method will hide the currently displaying answer (if any), and
// Unhide the answer corresponding to the clicked on answer.
// If the currently displaying answer is the same as the answer corresponding to the clicked on question,
// it will be hidden and no new answer will be unhidden
function unhideAnswer(number) {
    var answerID = "answer" + number;
    if (answerID != unhiddenAnswer) {
        document.getElementById(answerID).classList.remove("hideAnswer");
    }
    if (unhiddenAnswer != "")
        document.getElementById(unhiddenAnswer).classList.add("hideAnswer");
    if (unhiddenAnswer == answerID)
        unhiddenAnswer = ""
    else
        unhiddenAnswer = answerID;
}

我现在想添加一个全部展开/全部折叠按钮，让用户可以选择在需要时一次性打开和查看所有条款。 但是，如果不使用全部展开按钮，则应使用上面的常规打开和关闭功能。 我是 javascript 的新手，不知道实现这一点的最佳方法。 任何帮助，将不胜感激。

Answer 1

将答案 class 添加到每个答案，然后您可以使用此查询选择器遍历所有答案

// in your buildFAQTable fucntion
content += '<p id="answer' + index + '" class="hideAnswer answer">' + data[index][answersColumn] + '</p>';


document.querySelectorAll('.answer').forEach(answer => {
  // you can use toggle, add or remove to change the appearance of the answer
  answer.classList.toggle('hideAnswer')
})

我还建议您查看一些较新的 javascript 功能，例如字符串插值并避免使用 var，但如果您刚刚开始，这并不是那么重要。

（我还重构了你的一些代码，这可能使它更具可读性）

// Address of the Google Sheets Database
const public_spreadsheet_url = 'sheet link here';

// Column Names from Google Sheets Database
const questionsColumn = "Question";
const answersColumn = "Answer";

function toggleAnswer(num) {
        const answer = document.getElementById(`answer${num}`);
        answer.classList.toggle('hideAnswer');
}

function hideAll() {
        document.querySelectorAll('answer').forEach(answer => {
                answer.classList.add('hideAnswer');
        })
}

function showAll() {
        document.querySelectorAll('answer').forEach(answer => {
                answer.classList.remove('hideAnswer');
        })
}

function buildFAQTable(data) {
        let index = 0;
        let content = '<h2>Title Here</h2><div style="padding:0px 5%">';

        for (i in data) {
                content += `<h1 class="faq_question" onClick="unhideAnswer(${i})">${data[i][questionsColumn]}</h1>`;
                content += `<p id="answer${i}" class="hideAnswer answer">${data[i][answersColumn]}</p>`;
        }

        content += "<br></br><br></br>";
        return content;
}

function showInfo(data) {
        const editButton = `<center><a style="border-bottom: none" href="${public_spreadsheet_url}"><button class="button admin">Edit</button></a></center>`;

        document.getElementById("dynamic").innerHTML = buildFAQTable(data) + editButton;
}

window.addEventListener('DOMContentLoaded', () => {
    Tabletop.init({
        key: public_spreadsheet_url,
        callback: showInfo,
        simpleSheet: true
    });
}, { once: true })