在 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 中使用散列，但它会更复杂。

希望这可以帮助。 干杯