jquery - Accordion 使用户单击面板保持打开状态

Question

当我jQuery在菜单中使用手风琴时，如何在页面刷新时保持用户单击面板打开？当用户单击面板、发送请求并刷新页面时，手风琴总是关闭。

这是我的代码：

$(function(){
     var icons = {
        header: "ui-icon-triangle-1-e",
        activeHeader: "ui-icon-triangle-1-s"
         }

    $("#accordion").accordion({
        heightStyle:"content",
            header:".level21",
    event:"click",
    active:false,
    collapsible:true,
    icons:icons
    });  
 });

Answer 1

您应该Hidden Fields在回发期间使用来保持手风琴状态。

我不知道您使用的是哪种技术，但对于 ASP.net

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />


<script language="javascript" type="text/javascript">
    $(function(){
        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());

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

您可以在此处使用 JQuery cookies 插件，然后将其值设置如下

    change: function(event,ui) {
        var hid = ui.newHeader.children('a').attr('id');
    if (hid === undefined) {
        $.cookie('menustate', null);
    } else {
        $.cookie('menustate', hid, { expires: 2 });
    }
}

有用的文章在这里