回发后保持可折叠 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
};

回发后保持可折叠 Div 打开

Keep Collapsable Div Open After Postback

html

javascript

css

postback

collapse