Javascript 单击一次隐藏并显示窗体（面板）

我在c#asp.net中有一个Web表单，其中包括向数据库添加一些数据。用户可以选择“添加其他产品”或“结帐”

如果用户单击“添加另一个产品”，当前表单应隐藏并打开一个新的表单，该表单应允许用户添加另一个产品。如果他点击checkout，它会将他重定向到checkout。最后一步没问题

如果可能的话，我想把形式隐藏在一种手风琴中，然后像那样展示新的形式。如果没有，只需正常的隐藏和显示。此外，页面不应重新加载和释放数据

到目前为止，我一直在尝试：

rotected void btnAddNewProduct_Click(object sender, EventArgs e)
    {
        form1.Visible = false;
    }

第二种选择：

$(document).ready(function () {
function HideElement()
{
    document.getElementById("form1").style.display = "none";
}
});

<asp:Button ID="btnAddNewProduct" runat="server" class="form-control" Text="Add procut" OnClientClick="btnAddNewProduct_Click"/><br />

$（文档）.ready（函数（）{
函数HideElement（）
{
document.getElementById（“form1”）.style.display=“无”；
}
});

还尝试输入：

<div class="accordion">
<form id="form1" runat="server">
</form>
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes /base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
 $( function() {
 $( "#accordion" ).accordion();
  } );
  </script>

$（函数（）{
$（“#手风琴”）。手风琴（）；
} );

但它似乎不起作用

有什么帮助吗？如果我能用手风琴演奏，我会非常高兴的

---

谢谢

如果是客户端操作，请忘记ASP控件，在JQuery中使用普通web控件：

<button id="btnAddNewProduct">Add new</button>
<script>
    $(document).ready(function(){
        $("#btnAddNewProduct").click(function(){
            $("#accordion").accordion();
        })
    });
</script>

添加新的
$（文档）.ready（函数（）{
$（“#btnAddNewProduct”）。单击（函数（）{
$（“#手风琴”）。手风琴（）；
})
});

如果是客户端操作，请忘记ASP控件，在JQuery中使用普通web控件：

<button id="btnAddNewProduct">Add new</button>
<script>
    $(document).ready(function(){
        $("#btnAddNewProduct").click(function(){
            $("#accordion").accordion();
        })
    });
</script>

添加新的
$（文档）.ready（函数（）{
$（“#btnAddNewProduct”）。单击（函数（）{
$（“#手风琴”）。手风琴（）；
})
});

如果将控件可见性设置为false，则会有效地将其从页面中删除，这就是您丢失数据的原因。如果将控件可见性设置为false，则会有效地将其从页面中删除，这就是您丢失数据的原因。确定此操作有效。但这是否意味着我必须多次输入表单？我想实现的是，当我按下“添加新产品”时，form1将隐藏并显示新产品。这意味着每次客户端点击添加新产品时，表单都应该隐藏并打开新产品。我真的不理解您的场景，但您可以在客户端执行非常高级的操作。只要把客户端和服务器端的需求分开就行了。当我单击“添加新产品”时，accordion就不起作用了。它并没有隐藏自己，事实上没有发生任何事情。这里很多事情都可能出错。您可以在浏览器中调试客户端。在浏览器中的“单击”函数内设置一个断点，然后查看是否达到该断点。确定此操作有效。但这是否意味着我必须多次输入表单？我想实现的是，当我按下“添加新产品”时，form1将隐藏并显示新产品。这意味着每次客户端点击添加新产品时，表单都应该隐藏并打开新产品。我真的不理解您的场景，但您可以在客户端执行非常高级的操作。只要把客户端和服务器端的需求分开就行了。当我单击“添加新产品”时，accordion就不起作用了。它并没有隐藏自己，事实上没有发生任何事情。这里很多事情都可能出错。您可以在浏览器中调试客户端。在浏览器中的click函数内设置断点，然后查看是否达到该点。