使用链接或按钮切换整个手风琴功能

Question

我有一架手风琴很好用。我在想办法搜索手风琴的所有襟翼：

使用jQuery手风琴时在页面(Ctrl+F)上查找字符串

我已经在一个链接上使用了destroy方法，然后在另一个链接上重新初始化，但它将是伟大的切换这个与一个按钮。（（我本来在这里问这个问题没有这个解决方案，所以下面的答案就是这样，看有没有更好的解决方案出来，我才会接受））

$(document).ready(function() {
    $("#hide").click(function() {
        $(".accordion").accordion("destroy");
    });

    $("#show").click(function() {
        $(".accordion").accordion({
            navigation  : true,
            collapsible : true,
            heightStyle : "fill",
            active      : 
        });
    });
});

我还能够用jQuerytoggle()切换整个手风琴，但这只会使整个东西消失。我想要的是切换手风琴功能，同时保留div结构，使其可见，就像有人在浏览器中禁用JavaScript一样。

所以上面的类型符合我的要求，但实际上，更好的解决方案是删除类.accordion，因为这会使页面看起来像它应该做的那样。破坏手风琴实际上破坏了一些东西，这是不可取的。

我以为这会很容易,但它不起作用：

$(document).ready(function() {
    $("#hide").click(function() {
        $("#accordion").removeClass(".accordion");
    });

    $("#show").click(function() {
        $("#accordion").addClass(".accordion");
    });
});

这似乎是添加和移除我告诉它的类，但最初的移除并不是为了移除手风琴本身而移除accordion类。

Answer 1

销毁和重新装载是一个非常简单的解决方案。“一个按钮”方面可以通过document ready函数中的事件解决：

// event to destroy accordion and make it's content searchable
$("#open-1").on("click",function() {

    // if the button says Enable reload to bring the accordion back
    if ($(this).html() == "Enable") {
        location.reload();
    }

    // otherwise destroy the accordion and change the button to Enable
    else {
        $("#accord-1").accordion('destroy');
        $(this).html("Enable");
    }
});

按钮可以显示您最初想要的任何内容。关键是将其设置为“enable”并测试“enable”以重新加载页面。你也可以做任何你想做的字符串。这里有一个完整的例子。

Answer 2

我在一个链接上使用了destroy方法，然后在另一个链接上重新初始化（虽然一个按钮切换会更好）：

$(document).ready(function() {
    $("#hide").click(function() {
        $(".accordion").accordion("destroy");
    });

    $("#show").click(function() {
        $(".accordion").accordion({
            navigation  : true,
            collapsible : true,
            heightStyle : "fill",
            active      : 
        });
    });
});

我不得不编辑一些CSS使这工作，但这是最好的，我可以找到。

备注

我应该指出，我最终找到了一个更简单的方法。只需添加reload即可将页面恢复到原始状态：

$("#show").click(function() {
    location.reload();
});