2016-04-09 18 views
1

Ich habe ein Panel mit einer Reihe dieser Filter. Standardmäßig sind sie alle reduziert, aber wenn Sie auf die Schaltfläche klicken, wird das div erweitert. Bei jedem Postback ist das div jedoch kollabiert. Wie kann ich den aktuellen Status des div über Postbacks beibehalten?Keep Collapsable Div Nach Postback öffnen

   <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> 

Antwort

0

Sie runat=server auf die gesamte #startDate div hinzufügen und festlegen Klasse, um sie von Code hinter nach isPostBack Überprüfung oder besser noch ein wenig Javascript-Code anhängen, es zu öffnen, auf Seite bereit

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

Sie Angenommen verwenden C# und bootstrap

EDIT

können Sie den folgenden Code 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 
}; 
+0

Ich benutze C# und Bootstrap. Ich möchte jedoch, dass die divs standardmäßig minimiert sind. Wenn der Benutzer einen öffnet, möchte ich, dass er über Postbacks geöffnet bleibt, bis sie ihn schließen. –

+0

korrekt. Das ist es, was dieses kleine JavaScript-Snippet tun wird. Es erkennt Postbacks und öffnet das Div auf Postback. Sie müssen nur das korrekte Ziel angeben, das Sie möglicherweise mit einem Cookie verwenden können. –

+0

Vielleicht habe ich ein Missverständnis, aber dieser Code würde in das Page Load-Ereignis des Codebehind gehen und das Div jedes Mal zusammenbrechen, wenn es ein Postback gibt? Ich will nicht unbedingt das div offen sein. Ich möchte es nur öffnen, wenn es direkt vor dem Postback vom Benutzer geöffnet wurde. Ansonsten sollte es standardmäßig geschlossen sein, was bereits der Fall ist. –

1

Verwenden Sie ein HiddenField, um den Status des Panels zu speichern.