Question

我的手风琴很棒。我正试图找出一种搜索手风琴所有襟翼的方法：

Find String on Page (Ctrl+F) when jQuery Accordion in Use

我在链接上使用了destroy方法，然后在另一个链接上重新初始化，但是用一个按钮切换它会很棒。（（我最初在没有这个解决方案的情况下问过这个问题，所以下面的答案就是这个。我不会接受它，直到我看到是否有更好的解决方案出现））

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

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

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

所以上面那种做了我想要的，除了在现实中，更好的解决方案是实际删除类.accordion，因为这使得页面真正看起来应该如此。摧毁手风琴实际上会破坏一些东西，这是不可取的。

我认为它会像这样容易，但它不起作用：

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

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

这似乎是添加和删除我告诉它的类，但是初始删除并不是删除手风琴类来删除手风琴本身。

Answer 1

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

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

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

我不得不编辑一些CSS来解决这个问题，但这是我能找到的最好的。

注意

我应该注意到，我最终找到了一种更简单的方法。只需添加重新加载即可将页面恢复为原始状态：

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

Answer 2

销毁和重装是一个非常简单的解决方案。一个按钮方面通过此事件解决，该事件在文档就绪功能中进行：

// 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");
    }
});

该按钮最初可以说出您想要的任何内容。关键是它被设置为＆＃34;启用＆＃34;并测试＆＃34;启用＆＃34;重新加载页面。你也可以制作你想要的任何字符串。这是complete example。

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

2 个答案: