Question

我是HTML-CSS的新手。我已经创建了一些按钮，并且可以单击它们，它们将显示更多信息。但是我也希望当单击一个按钮时，所有其他按钮“折叠”它们所显示的信息。我尝试查找它并尝试使用代码，但没有设法做到这一点。希望能有所帮助！

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

点击按钮后，只需循环使用id以Project开头的所有元素，即可使用Document.querySelectorAll()和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>

Answer 2

不进行切换的原因是方括号。您从未在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 3

我想出了这个解决方案，还有许多其他解决方案。如果您认为这有帮助..干杯：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>

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

3 个答案: