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

Posted 2023-05-08

【中文标题】使用链接或按钮切换整个手风琴功能

【英文标题】：Toggle Entire Accordion Functionality with Link or Button

【发布时间】：2013-01-24 13:35:13

【问题描述】：

我有一架很好用的手风琴。我正在尝试找出一种方法来搜索手风琴的所有襟翼：

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

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

【问题讨论】：

我很确定删除 accordion 类不会破坏小部件。是什么让您认为它比以前的解决方案更好？

好吧，我犯了一个错误，并且在班级上设置了高度，所以在我的测试中我忽略了这一点。所以你是对的 - 是什么让我这么想？没什么，现在;-)

【参考方案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();
);

【参考方案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");
    
);

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