使用 HTML 和 CSS 隐藏和显示多个部分答案

【问题标题】：Multiple Section Hide & Show with HTML & CSS使用 HTML 和 CSS 隐藏和显示多个部分
【发布时间】：2022-02-12 07:15:00
【问题描述】：

我有显示/隐藏页面内部部分（不是主要部分）的 html 按钮，我在主要部分中有主要部分我有五个内部部分，问题和目标的详细信息在下面的代码中详细提及。

1.关于我的目标的详细信息

我想在同一个（单个按钮）上实现隐藏/显示事件，而不更改其标签，当用户单击按钮时，所有内部部分都应该隐藏在页面上，当用户单击相同按钮时，它应该显示所有部分包括那个有 html 按钮的。

2。预期和实际结果

预期结果与我上面的目标相同，而我的代码中的实际结果并没有给出隐藏所有 5 部分的想法。

到目前为止我已经尝试过什么

document.getElementById("Ayat-3").classList.add("hide-section");
document.getElementById("Ayat-4").classList.add("hide-section");
document.getElementById("Ayat-5").classList.add("hide-section");
document.getElementById("Ayat-6").classList.add("hide-section");
document.getElementById("Ayat-7").classList.add("hide-section");

function toggleHide() {
  var section = document.querySelectorAll('.hide-section');
  section.forEach(el => el.classList.toggle('d-none'));
}

#button {
  color: white;
  background-color: green;
  padding: 12px;
  font-size: 14px;
  width: 25px;
  height: 25px;
  border: 5px;
  border-color: blue;
  cursor: pointer;
  border-radius: 150px;
}

.button:hover,
.button:focus {
  background-color: white;
}

.d-none {
  .display: none;
}

&lt;button onclick="toggleHide()"&gt;Hide/Show Sections&lt;/button&gt;

4.我面临的错误

在上面的代码中，隐藏所有提到的五个部分并单击第一次它只隐藏三个部分，第二次单击隐藏的不同三个部分时相同，我想隐藏所有五个部分并全部显示第二次点击。

【问题讨论】：

脚本似乎做了似乎被设计做的事情。你的经验是什么？您的描述与我们在 sn-p 中看到的任何内容都不匹配
另外请使用小写的HTML标签，而不是你现在的大写和混合大小写的混乱
我已经解决了按钮自定义问题，我唯一需要的是如何使用显示/隐藏选项将多个元素添加到一个功能。
我只想有一个按钮，供您参考，我有 286 个内部部分，按钮本身位于 1 个内部部分，我想要做的是当用户单击按钮时，然后只有一个内部部分应该是可见的，这与放置按钮的部分相同，所有剩余的 285 个内部部分应该被隐藏，并且在切换或再次单击相同的按钮时，它应该显示所有部分，我的意思是所有 286 个内部部分，包括一个有按钮的部分。
您提供的代码不完整。请修改 sn-p 演示，使其不会出错。此外，您的 CSS 中有一个额外的点 (.display)。

标签： html jquery css

【解决方案1】：

要通过单击一个按钮来隐藏多个元素，您可以将querySelectorAll 与forEach 命令结合使用。然后你给所有你想受脚本影响的元素同一个类：

function toggleHide() {
  var section = document.querySelectorAll('.hide-section');
  
  section.forEach(el => el.classList.toggle('d-none'));
}

.d-none {
  display: none;
}

<section>Section will not hide</section>
<section class="hide-section">Section will hide</section>
<section class="hide-section">Section will hide</section>
<section class="hide-section">Section will hide</section>
<section class="hide-section">Section will hide</section>
<button onclick="toggleHide()">Hide/Show Sections</button>

【讨论】：

感谢您的回复，我在网上看到过类似的例子，但我对将我的部分 ID 放在哪里有点困惑？假设我的页面上有（Ayat-1，Ayat-2，Ayat-3，Ayat-4）四个部分，我只需要显示 Ayat-1 并休息以隐藏，再次单击时会全部显示。如何将所有这些部分添加到一个类并在第一次单击时隐藏该类并在第二次单击时再次显示它太令人困惑了。我在编码方面并不是那么出色。如果您可以修改代码，请展示一些很棒的示例。
是什么阻止了您添加课程？元素可以同时具有 id 和 class。

【解决方案2】：

这是最终的工作代码，我希望这里的专家能提供一些帮助来识别错误，但无论如何现在已经完成了。

 <!DOCTYPE html>
<html>

<button id="Mybutton" onclick='hideSections()'>[1:2]</button>



<style>
#Mybutton  {
    background-color: green;
    color: white;
    width: 50px;
    text-align: center;
    border-radius: 8px;
    height: 35px;
    border-style: solid;
    border-color: blue;
    border-width: 1px;
    
}

#Mybutton:hover {
    background-color: grey;
    
}

    
.hide {
  display: none;
}

.hideWithOpacity {
  visibility: hidden;
  opacity: 0;
}

.section {
  margin: 10px;
  padding: 10px;
  border: 1px dashed red;
  max-width: 150px;
  transition: all .3s linear;
}

</style>


<section id="Ayat-1"></section>
<section id="Ayat-2"></section>
<section id="Ayat-3"></section>
<section id="Ayat-4"></section>
<section id="Ayat-5"></section>
<section id="Ayat-6"></section>
<section id="Ayat-7"></section>


<script>
    
    function hideSections() {
  const otherSections = document.querySelectorAll('[id^=Ayat-]:not(#Ayat-2)')
  
  otherSections.forEach((section) => section.classList.toggle('hide'))
}

</script>

</html>

【讨论】：