javascript - javascript 用两个按钮隐藏/显示 div 的手风琴 ASP.NET

问题描述

我有几个 div 我想在单击按钮时隐藏 div 并在单击第二个按钮时显示。我会使用 .vissible 函数，但 div 是在后端生成的，所以据我所知，我需要使用 javascript 来解决问题。

这是我的后端代码。

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i <= 10; i++)
        {
            HtmlGenericControl divTest = new HtmlGenericControl("div");
            divTest.Attributes.Add("class", "divClass");
            divTest.InnerText = "Div" + i;
            form1.Controls.Add(divTest);

            ImageButton collapseButton = new ImageButton();
            collapseButton.ImageUrl = "~/images/minus.png";
            collapseButton.Height = 20;
            collapseButton.Width = 20;
            divTest.Controls.Add(collapseButton);

            ImageButton expandButton = new ImageButton();
            expandButton.ImageUrl = "~/images/plus.png";
            expandButton.Height = 20;
            expandButton.Width = 20;
            form1.Controls.Add(expandButton);


        }

这是我的前端代码。

但是 javascript 不会产生我想要的结果。

 <style>
.divClass {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}


.collapseButton {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>

<script>
    var acc = document.getElementsByClassName("divClass");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>


<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

任何修复 javascript 代码的帮助将不胜感激。这是它在视觉上的样子。当按下按钮减号时，我希望包含减号的 div 也被隐藏。加号显示隐藏的 div。

标签： javascriptjqueryhtmlcssasp.net

javascript - javascript 用两个按钮隐藏/显示 div 的手风琴 ASP.NET

问题描述

解决方案

推荐阅读