如何通过指定主按钮一键点击仅切换显示隐藏下方截图而非全部内容

核心问题：你当前的逻辑是给包裹了所有文本、截图的<dl>元素切换隐藏类，所以点击后会隐藏整块内容。只要将隐藏逻辑调整为仅作用于截图外层的.toggle容器即可，修改步骤如下：

1. 修改HTML：删除<dl>标签上的class="toggle-class"属性，避免默认隐藏整个文本区域，修改后对应代码为：

<dl id="txt">

其余HTML代码无需改动。

2. 修改CSS：新增专门控制截图隐藏的样式，可删除原无用的.toggle-class规则：

.article {
    background-color: white;
    border: 1px groove silver;
    border-radius: 1em;
    margin-left: 230px;
    min-width: 700px;
    padding: 1em;
    width: auto;
}

img.screenshot {
    margin-bottom: 20px;
    margin-top: 20px;  
}

div.toggle {
    margin: 10px 0 0 50px;
}

/* 新增截图隐藏样式 */
.toggle-hidden {
    display: none;
}

3. 修改JavaScript：调整点击事件逻辑，改为批量切换所有截图容器的显示状态，同时可同步更新按钮文案提示：

let toggleButton = document.getElementById("main button");

toggleButton.addEventListener('click', () => {
    // 获取所有截图外层容器
    const screenshotWrappers = document.querySelectorAll(".toggle");
    // 判断当前显示状态
    const currentHidden = screenshotWrappers[0].classList.contains("toggle-hidden");
    // 遍历所有容器切换隐藏类
    screenshotWrappers.forEach(wrapper => {
        wrapper.classList.toggle("toggle-hidden");
    });
    // 切换按钮显示文本
    toggleButton.innerText = currentHidden ? "Hide all screens" : "Show all screens";
});

如果需要默认隐藏所有截图，只要给所有的<div class="toggle">加上toggle-hidden类即可。

内容的提问来源于stack exchange，提问作者Per