HTML 个按钮，在单击按钮时切换并切换所有其他按钮（折叠信息）

Question

我是 HTML-CSS 的新手。我创建了一些按钮，我可以点击它们，它们会显示更多信息。然而，我也希望当一个按钮被点击时，所有其他按钮 'collapse' 它们显示的信息。我已经尝试查找它并尝试使用代码，但还没有成功。非常感谢您的帮助！

function thirdP() {
  var x = document.getElementById("Project3");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
 function secondP() {
  var x = document.getElementById("Project2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function firstP() {
  var x = document.getElementById("Project1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<ul>
     <button class="button" onclick="firstP">1st Project</button>
     <div id="Project1" style="display:none" align="right">Information about the first project...</div>
</ul>
<ul>
     <button class="button" onclick="secondP">2nd Project</button>
     <div id="Project2" style="display:none" align="right">Information about the second project...</div>
</ul>
<ul>
     <button class="button" onclick="thirdP">2nd Project</button>
     <div id="Project3" style="display:none" align="right">Information about the second project...</div>

我知道这可能是非常低效的，因为我正在为每个按钮编写相同的 Javascript 函数。我无法创建适用于所有 ID 的单个函数。

Answer 1

不切换的原因是括号。您从未在 onclick 中使用括号作为函数。

示例： onclick="firstP()"

我修改了你的代码。检查一次。您可以使用一个函数来操作所有 id 的切换，因为您需要像我一样将 id 变量传递给函数。

<ul>
  <button class="button" onclick="firstP(1)">1st Project</button>
  <div id="Project1" style="display:none" align="right">Information about the first project...</div>

  <script>
  function firstP(elementId) {
      var x = document.getElementById('Project'+elementId);
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
  </ul>

  <ul>
  <button class="button" onclick="firstP(2)">2nd Project</button>
  <div id="Project2" style="display:none" align="right">Information about the second project...</div>

  <!-- <script>
  function secondP() {
      var x = document.getElementById("Project2");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script> -->
  </ul>

  <ul>
  <button class="button" onclick="firstP(3)">2nd Project</button>
  <div id="Project3" style="display:none" align="right">Information about the second project...</div>

  <!-- <script>
  function thirdP() {
      var x = document.getElementById("Project3");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script> -->
  </ul>

Answer 2

我找到了这个解决方案，还有很多其他的。如果您认为这有帮助..干杯 :D

function showDiv() {

  var x = document.querySelectorAll(".info-div");
  x.forEach(item => {
     item.style.display = 'none';
  });
  event.target.nextElementSibling.style.display = 'block'
}

<ul>
     <button class="button" onclick="showDiv()">1st Project</button>
     <div class="info-div" style="display:none" align="right">Information about the first project...</div>
</ul>
<ul>
     <button class="button" onclick="showDiv()">2nd Project</button>
     <div class="info-div" style="display:none" align="right">Information about the second project...</div>
</ul>
<ul>
     <button class="button" onclick="showDiv()">3rd Project</button>
     <div class="info-div" style="display:none" align="right">Information about the third project...</div>

Answer 3

单击按钮时，只需循环所有 id 以 Project 开头的元素，然后使用 Document.querySelectorAll() and Array.prototype.forEach() 设置 display = "none"。然后只显示点击按钮的nextElementSibling。请尝试以下操作：

function project(btn) {
  document.querySelectorAll('[id^="Project"]').forEach(div => div.style.display = "none");
  btn.nextElementSibling.style.display = "block";
}

<ul>
  <button class="button" onclick="project(this)">1st Project</button>
  <div id="Project1" style="display: none;" align="right">Information about the first project...</div>

</ul>

<ul>
  <button class="button" onclick="project(this)">2nd Project</button>
  <div id="Project2" style="display: none;" align="right">Information about the second project...</div>
</ul>

<ul>
  <button class="button" onclick="project(this)">3rd Project</button>
  <div id="Project3" style="display: none;" align="right">Information about the third project...</div>
</ul>

HTML 个按钮，在单击按钮时切换并切换所有其他按钮（折叠信息）

HTML buttons, toggle when button clicked and toggle all other buttons (collapse info)

html

javascript

css

button

toggle