在 ASP.NET 回發后保持當前手風琴窗格打開

Question

在 ASP.NET 頁面回發后，我無法保持活動狀態。

這是腳本：

$(document).ready(function() {

    $('.accordionButton').click(function() {

        //Remove the "accordionOn" calss from all button
        $('.accordionButton').removeClass('accordionOn');

        //Close all open divs
        $('.accordionContent').slideUp('normal');

        //Open the div
        if ($(this).next().is(':hidden') == true) {

        //Add the "accordionOn" class to the button
            $(this).addClass('accordionOn');

            //Open div
            $(this).next().slideDown('normal');
        }

    });

});

這是標記：

<div id="accordionWrapper">
        <div class="accordionButton">
            Hearder 1</div>
        <div class="accordionContent">
            Content 1
            <asp:Label ID="lblName" runat="server"></asp:Label>
            <br />
            <asp:Button ID="btnSayHello" runat="server" Text="Say Hello" />
        </div>
       <div class="accordionButton">
        Hearder 2</div>
    <div class="accordionContent">
        Content 2
    </div>    
       <div class="accordionButton">
        Hearder 3</div>
    <div class="accordionContent">
        Content 3
    </div>      

</div>

我想在 ASP.NET 的回發期間保持活動的手風琴，即當前打開的 div 保持打開狀態。

謝謝你。

Answer 1

回發所選窗格的索引，並在頁面加載時恢復為

$('.accordionButton').eq(index).click()

Answer 2

索引值可以是 boolean 或 integer

<script language="javascript" type="text/javascript">
    $(function () {
        var activeIndex = parseInt($('#<%=AccordionIndexHidden.ClientID %>').val());
        if (activeIndex < 0) 
            activeIndex = false;
        $("#accordion").accordion({
            autoHeight: false,
            event: "mousedown",
            active: activeIndex,
            change: function (event, ui) {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=AccordionIndexHidden.ClientID %>').val(index);
            }
        });
    });


</script>

記得從索引小於 0 開始

    <asp:HiddenField ID="AccordionIndexHidden" runat="server" Value="-1" />

Answer 3

您可以將手風琴 position 保存在 cookie 中，然后在頁面加載時檢索它並使用以下內容進行設置：

   $('.accordionButton').eq(index).click()

在此處查看如何在 javascript 中的 cookie 中設置/獲取值

Answer 4

您應該保存選定的窗格，並在頁面加載時將 select 與 javascript 一起保存：

$(document).ready(function(){
  $('.accordionButton').eq(<%= SelectedPane %>).click()
});

或者，您可以像 facebook 那樣在 url 中使用散列，但它會更復雜。

希望這可以幫助。 干杯