如何通过提供的主按钮一键显示/隐藏所有屏幕？答案

【问题标题】：How can show/hide all screens with one click via the provided main button?如何通过提供的主按钮一键显示/隐藏所有屏幕？
【发布时间】：2021-09-27 21:41:47
【问题描述】：

我试过了，但它似乎隐藏并显示了按钮下的所有内容。我想只隐藏和显示按钮下方的图像，而不是文本。

<article>
    <h2>Create a new site</h2>
    <button id="main button">Hide all screens</button>
    
    <dl id="txt" class="toggle-class">
        <dt>Site – Manage Sites - New:</dt>
        <dd>
            the Site definition Wizard appears, you answer a number of questions
            <div class="toggle">
                <img class="screenshot" width="238" height="222" src="images/clip_image01.gif" alt="screenshot"  />
            </div>
        </dd>

        <dt>“What would you like to call the website?”</dt>
        <dd>
            enter George's site
            <div  class="toggle">
                <img class="screenshot" width="310" height="307" src="images/clip_image02.gif" alt="screenshot" />
            </div>
        </dd>
    </dl>
</article>

.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-class {
    display: none;
}

我尝试过“使用 JavaScript 在隐藏和显示元素之间切换。”

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

toggleButton.addEventListener('click', () => {
    txt.classList.toggle("toggle-class");
});

【问题讨论】：

也许display: hidden; ？您是否尝试过将显示值直接添加到元素？
我尝试直接添加。没用。
您的事件处理程序中的txt 是什么？
在点击事件中，使用 queryselectorall 找到所有.toggle img.screenshot，然后用 forEach 遍历它们并切换类
您希望文本始终可见吗？切换父元素的可见性将影响底层元素，除非您也相应地设置它们的样式。

标签： javascript html css

【解决方案1】：

尝试如下 sn-p:

const btn = document.querySelector('#main-button')
btn.addEventListener('click', () => {
  const images = document.querySelectorAll('.toggle .screenshot')
  images.forEach(i => i.classList.toggle('toggle-class'))
  images[0].classList.contains('toggle-class') ? btn.innerText = 'Show all screens' : btn.innerText = 'Hide all screens'
})

.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-class {
  display: none;
}

<article>
  <h2>Create a new site</h2>
  <button id="main-button">Hide all screens</button>
  <dl id="txt" class="">
    <dt>Site – Manage Sites - New:</dt>
    <dd>
          the Site definition Wizard appears, you answer a number of questions
      <div class="toggle">
        <img class="screenshot" width="238" height="222" src="https://picsum.photos/200" alt="screenshot"  />
      </div>
    </dd>
    <dt>“What would you like to call the website?”</dt>
    <dd>
       enter George's site
      <div  class="toggle">
        <img class="screenshot" width="310" height="307" src="https://picsum.photos/200" alt="screenshot" />
      </div>
    </dd>
  </dl>
</article>

【讨论】：