Javascript HTML按钮，单击按钮时切换，以及切换所有其他按钮（折叠信息）

我是HTML-CSS新手。我已经创建了一些按钮，我可以点击它们，它们将显示更多信息。然而，我也希望当一个按钮被点击时，所有其他按钮“折叠”它们显示的信息。我已经试着查找它，并尝试使用代码，但没有成功。谢谢你的帮助

函数thirdP（）{
var x=document.getElementById（“项目3”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
函数secondP（）{
var x=document.getElementById（“项目2”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
函数firstP（）{
var x=document.getElementById（“项目1”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

第一个项目
关于第一个项目的信息。。。


第二个项目
关于第二个项目的信息。。。


第二个项目
关于第二个项目的信息…

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

第一个项目
关于第一个项目的信息。。。
函数firstP（elementId）{
var x=document.getElementById（'Project'+elementId）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}


第二个项目
关于第二个项目的信息。。。


第二个项目
关于第二个项目的信息。。。

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

第一个项目
关于第一个项目的信息。。。
函数firstP（elementId）{
var x=document.getElementById（'Project'+elementId）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}


第二个项目
关于第二个项目的信息。。。


第二个项目
关于第二个项目的信息。。。

我想出了这个解决方案，还有很多其他的解决方案。如果你认为这有帮助的话。。干杯：D

函数showDiv（）{
var x=document.querySelectorAll（“.info div”）；
x、 forEach（项目=>{
item.style.display='none'；
});
event.target.nextElementSibling.style.display='block'
}

第一个项目
关于第一个项目的信息。。。


第二个项目
关于第二个项目的信息。。。


第三个项目
关于第三个项目的信息…

我想出了这个解决方案，还有很多其他的。如果你认为这有帮助的话。。干杯：D

函数showDiv（）{
var x=document.querySelectorAll（“.info div”）；
x、 forEach（项目=>{
item.style.display='none'；
});
event.target.nextElementSibling.style.display='block'
}

第一个项目
关于第一个项目的信息。。。


第二个项目
关于第二个项目的信息。。。


第三个项目
关于第三个项目的信息…

单击按钮后，只需在其

id

以

project

开头的所有元素中循环，即可使用和设置

display=“none”

。然后仅显示单击按钮的

nextElementSibling

。请尝试以下操作：

功能项目（btn）{
document.querySelectorAll（'[id^=“Project”]'）.forEach（div=>div.style.display=“none”）；
btn.nextElementSibling.style.display=“block”；
}

第一个项目
关于第一个项目的信息。。。


第二个项目
关于第二个项目的信息。。。


第三个项目
关于第三个项目的信息。。。

单击按钮，只需在id以项目开始的所有元素中循环，即可使用和设置

display=“none”

。然后仅显示单击按钮的

nextElementSibling

。请尝试以下操作：

功能项目（btn）{
document.querySelectorAll（'[id^=“Project”]'）.forEach（div=>div.style.display=“none”）；
btn.nextElementSibling.style.display=“block”；
}

第一个项目
关于第一个项目的信息。。。


第二个项目
关于第二个项目的信息。。。


第三个项目
关于第三个项目的信息。。。