制作带有状态指示的jquery可扩展可折叠框？

Question

一段时间以来，我尝试使用 jquery 创建一个可折叠/可扩展的 div 来构建“基本”和“高级”搜索框，但均无济于事。

• 展开或折叠 div
• 根据我们的状态更改 div 上的文本
• 根据我们所处的状态将“指示箭头”更改为关闭或展开
• 可选：将状态保存在 cookie 中，以便在页面刷新时存储它

我想出了类似的东西：

$(document).ready(function () {

$('#container_search').show();

if ($.cookie('status_basic') == 1) {
    //$('#container_search').show();
    //$('#container_search_advanched').hide();
}

if ($.cookie('status_basic') == 0) {
    //$('#container_search_advanched').show();
    //$('#container_search').hide();
    }

});

function advanched() {
    //$('#container_search').show();
    //$('#container_search_advanched').hide();
}

function basic() {
    //$('#container_search').hide();
    //$('#container_search_advanched').show();
}

但我处理它很复杂，是否有任何插件几乎可以在默认情况下做到这一点，或者是否有人实现了类似的东西并且有一些关于如何在 jquery 中最好地解决这个问题的指南？

Answer 1

这是一个示例代码。您可以使用 slideDown 和 slideUp 函数来达到预期的目的。

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");
}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow"); 
});