Question

我有几个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。

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

0 个答案: