jQuery 多个隐藏和显示面板

Question

想法是在右边有一个类似于这个的过滤器:- Filter toggle example

所以基本上我希望能够像示例那样拥有多个展开和折叠的 div。我发现的插件只允许在任何给定时间扩展一个 div。

任何帮助都会很棒，

谢谢

Answer 1

您可以使用 jQuery UI Accordion ，但您可以用一个部分创建多个 Accordion ，而不是在多个部分创建 Accordion 。

不确定您使用的是什么插件，但也许您可以使用相同的技巧。

或者自己写...

<div class="panel collapsed">
    <h2 class="header">header1</h2>
    <div class="content">This is content</div>
</div>
<div class="panel">
    <h2 class="header">header2</h2>
    <div class="content">This is content</div>
</div>​​​​​​​​​​​​​​

CSS...

.panel {
    margin-bottom: 10px;
    background-color: silver;
    width: 200px;
}
.panel .header {
}
.panel.collapsed .content {
    display: none;
}

和 JavaScript(使用 jQuery)... JSFiddle这里

$(".panel .header").click(function() {
    $(this).parent().toggleClass("collapsed")
})

或者如果你喜欢褪色... JSFiddle这里

​$(".panel .header").click(function() {
    $(this).next().fadeToggle();
})