0

我有一架手风琴,效果很好。我试图找出一种方法来搜索手风琴的所有襟翼:

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

我在一个链接上使用了 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");
    });
});

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

4

2 回答 2

0

我在一个链接上使用了 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();
});
于 2013-02-08T20:14:40.123 回答
0

销毁和重新加载是一个非常简单的解决方案。一个按钮方面是通过这个事件解决的,该事件进入文档准备功能:

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

该按钮最初可以说出您想要的任何内容。关键是它设置为“启用”并测试“启用”以重新加载页面。您也可以制作任何您想要的字符串。这是一个完整的例子

于 2015-06-14T13:33:02.133 回答