css 回发后保持可折叠Div打开

e3bfsja2  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(228)

我有一个面板,里面有很多这样的过滤器。默认情况下,它们都是折叠的,但是当你点击按钮时,它会展开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>
y53ybaqx

y53ybaqx1#

使用HiddenField存储面板的状态。

czfnxgou

czfnxgou2#

您可以将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
};

相关问题