Javascript 回邮后保持可折叠Div打开

我有一个面板，里面有一堆这样的过滤器。默认情况下，它们都是折叠的，但是当您单击按钮时，它会展开div。但是，每次有回发时，div都会折叠。如何在回发中保持div的当前状态

                <h4 class="contentFilterHeader">Start Date</h4>
                <button type="button" class="btn" data-toggle="collapse" data-target="#startDate">
                <div id="startDate" class="collapse">
                    <label for="from">Before:</label>
                    <div class="form-group">
                        <div class="date">
                            <div class="input-group">
                                <input type="text" class="form-control" id="startPicker" runat="server" name="date" />
                                <span class="input-group-addon><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

开始日期
之前：
使用隐藏字段来存储面板的状态。
您可以将
runat=server
添加到整个
#startDate
div中，并在选中
isPostBack
后从代码隐藏处为其设置类，或者最好附加一点javascript代码以在页面就绪时打开它

                <h4 class="contentFilterHeader">Start Date</h4>
                <button type="button" class="btn" data-toggle="collapse" data-target="#startDate">
                <div id="startDate" class="collapse">
                    <label for="from">Before:</label>
                    <div class="form-group">
                        <div class="date">
                            <div class="input-group">
                                <input type="text" class="form-control" id="startPicker" runat="server" name="date" />
                                <span class="input-group-addon><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

startDate.innerHtml = startDate.innerHtml + "<script> $(document).ready(function(){ $('#startDate').collapse('show') }) </script>";

startDate.innerHtml=startDate.innerHtml+“$（文档）.ready（函数（）{$（'#startDate'）.collapse（'show'））”；

假设您正在使用c#和

                <h4 class="contentFilterHeader">Start Date</h4>
                <button type="button" class="btn" data-toggle="collapse" data-target="#startDate">
                <div id="startDate" class="collapse">
                    <label for="from">Before:</label>
                    <div class="form-group">
                        <div class="date">
                            <div class="input-group">
                                <input type="text" class="form-control" id="startPicker" runat="server" name="date" />
                                <span class="input-group-addon><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

编辑

                <h4 class="contentFilterHeader">Start Date</h4>
                <button type="button" class="btn" data-toggle="collapse" data-target="#startDate">
                <div id="startDate" class="collapse">
                    <label for="from">Before:</label>
                    <div class="form-group">
                        <div class="date">
                            <div class="input-group">
                                <input type="text" class="form-control" id="startPicker" runat="server" name="date" />
                                <span class="input-group-addon><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

您可以使用以下代码

                <h4 class="contentFilterHeader">Start Date</h4>
                <button type="button" class="btn" data-toggle="collapse" data-target="#startDate">
                <div id="startDate" class="collapse">
                    <label for="from">Before:</label>
                    <div class="form-group">
                        <div class="date">
                            <div class="input-group">
                                <input type="text" class="form-control" id="startPicker" runat="server" name="date" />
                                <span class="input-group-addon><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

var t，
//读取cookie并确定之前是否打开了任何面板
earlierPanel=readCookie（“openpanel”）
//如果找到值，则折叠所有早期面板，然后打开最后一个面板
if（早期面板）{
$（'#accordion.panel collapse'）。removeClass（“in”）；
$（“#”+earlierPanel）.addClass（“in”）
}
//重置用户打开另一个面板时的行为
$（'#accordion'）.on（'show.bs.collapse'，函数（w）{
t=w.target；
createCookie（“openpanel”，$（t）.attr（“id”））
})
//使用以下命令删除cookie值，也可以编写代码删除cookie
$（'#accordion'）.on（'hide.bs.collapse'，函数（w）{
createCookie（“openpanel”和“”）
})
函数createCookie（名称、值）{
document.cookie=name+“=”+value+“path=/”；
}
函数readCookie（名称）{
变量e=名称+“=”；
var a=document.cookie.split（“；”）；
对于（var d=0；d
我正在使用c#和引导。但是，我希望默认情况下折叠div。如果用户打开一个，那么我希望它在回发过程中保持打开状态，直到他们正确关闭它。这就是这个小小的javascript片段将要做的。它将检测回发并在回发时打开div。你只需要指定一个正确的目标，也许你可以使用cookie。也许我有一个误解，但该代码会进入codebehind的页面加载事件，并在每次回发时折叠div？我不一定想让部门公开。我只希望它在回发发生之前被用户打开。否则，默认情况下它应该关闭，这已经是事实了。@JohnSmith您能试试我修改过的代码吗。此代码仅为javascript，不需要服务器端编码。：）p、 我知道这有点过头了，但它应该能完成这项工作。唯一的问题是，一旦我打开它，它就会在回发中保持打开状态，即使我关闭它