回发后保持可折叠 Div 打开

Question

我有一个包含一堆这些过滤器的面板。默认情况下，它们都是折叠的，但是当您单击按钮时，它会展开 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>

Answer 1

使用 HiddenField 来存储面板的状态。

Answer 2

您可以将runat=server 添加到整个#startDate div 中，并在检查isPostBack 后从后面的代码中将Class 设置为它们，或者更好的是附加一些javascript 代码以在页面就绪时打开它

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

假设您使用的是 c# 和 bootstrap

编辑

您可以使用以下代码 http://codepen.io/jammer99/pen/eZyqEN

var t,
  //read cookie and determine if any panel was open before
  earlierPanel = readCookie("openpanel")
  //if value is found collapse all earlier panels and then open the last panel
if (earlierPanel) {
  $('#accordion .panel-collapse').removeClass("in");
  $("#" + earlierPanel).addClass("in")
}
//reset the behaviour when user opens another panel
$('#accordion').on('shown.bs.collapse', function(w) {
  t = w.target;
  createCookie("openpanel", $(t).attr("id"))
})

// remove cookie value using the following or you can write your code to delete the cookie
$('#accordion').on('hide.bs.collapse', function(w) {  
  createCookie("openpanel","")
})

function createCookie(name, value) {
  document.cookie = name + "=" + value + "; path=/";
}

function readCookie(name) {
  var e = name + "=";
  var a = document.cookie.split(";");
  for (var d = 0; d < a.length; d++) {
    var f = a[d];
    while (f.charAt(0) == " ") {
      f = f.substring(1, f.length)
    }
    if (f.indexOf(e) == 0) {
      return f.substring(e.length, f.length)
    }
  }
  return null
};