如何保存嵌套的 JqueryUI 手风琴的状态并通过稍后阅读重新打开它

Question

您好，我正在处理一个非常嵌套的手风琴。我想做的是，每当用户更改手风琴的状态时，我想在 URL 中记录该更改，以便在刷新时我可以读取 URL 并创建一个新的手风琴状态。我已经知道 $( ".selector" ).accordion( "option", "active" )，但关于它的一切都让我感到困惑。

首先，我 select as ".selector" 是什么，因为我最初使用 "div.folder" 作为 selector 来创建手风琴，但我认为jQueryUI 在内部使用它，在检查 html 页面时它不会显示。这就是我制作手风琴的方式。

$("div.folder").accordion({collapsible: true, active :false, heightStyle: "content" , activate: function( event, ui ) { console.log($( "#accordion" )
                .accordion( "option", "active" ))}});

其次当它起作用时会怎样return？一个数字？它有整棵树的状态吗？第三，当我有状态时，如何告诉 jqueryUI 根据特定状态重新创建手风琴？最后，我不知道这是否会导致大问题，但我有两个手风琴一起工作，因为这里有一个代码片段。

    //uses Jquery UI to turn the file system into a collapsible menu
    $("div.folder").accordion({collapsible: true, active :false, heightStyle: "content" , activate: function( event, ui ) { console.log($( "#accordion" )
                .accordion( "option", "active" ))}});
    $("div.file").accordion({collapsible: true, active :false, heightStyle: "content",  activate: function( event, ui ) {console.log($( "#accordion" )
                .accordion( "option", "active" ))}});

查询状态会不会出问题？我不确定我是在处理一架还是两架手风琴。

Answer 1

好的，经过反复试验，我终于让它工作了。我发现在网络上做研究没什么用，所以我会尽力帮助那些可能遇到这个问题的人。我将要分享的内容适用于我的具体实现，它可能不适用于其他实现，所以我会尽可能地尝试和阐明我的实现。

好的，首先问题是我需要一个嵌套的 jquery ui 手风琴。我这样做的方法是让所有目标标签都相同 class。当我调用 .accordion 方法时，我在整个 class 上都这样做了。这就是让我的情况与我运行在网络上看到的所有情况不同的原因。由于这种情况，这个大手风琴几乎就像是一系列较小的手风琴。如果我要求

$(.selector).accordion( "option", "active",)

它只会告诉我 0，因为 "in a sense" 那里有多个手风琴，它不知道选择哪个。

打印出来的时候偶然发现的解决方法

$( .selector ).accordion({ activate: function( event, ui ) {}})

进入屏幕。我发现 Jquery UI 正在将我的大手风琴视为一组单个单元手风琴。所以我回到我的代码并确保每个 "unit" 手风琴都有自己唯一的 ID。有了这些信息，我使用了一个事件处理程序，每次我更改手风琴时，它都会将打开的 "mini accordions" 的 id 附加到 url （或者如果它已关闭则删除）。

那是我"saved"的状态。为了重新打开正确的状态，我阅读了 url，解析了它，然后为每个唯一的 ID 调用了

$( "uniqueID" ).accordion( "option", "active",0 )

这基本上会找到 "mini accordion" 并打开它。因为这是针对所有打开的 "mini accordions" 完成的，所以您的大手风琴将按照您想要的方式展开。

如果有人正在阅读本文，请提出您需要的任何问题，如果我记得的话，我会回答。

如何保存嵌套的 JqueryUI 手风琴的状态并通过稍后阅读重新打开它

How to save a nested JqueryUI accordian's state and reopen it by reading later

javascript

jquery

jquery-ui

jquery-ui-accordion