Question

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

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

任何帮助都会很棒，

由于

Answer 1

你可以使用jQuery UI 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();
})

Answer 2

您可以使用此结构显示和隐藏多个面板;

here is demo

的jQuery

$('.content').slideUp(1000);

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(1000);//show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');//strip close from id = 1second
    $('#'+takeID+'C').slideUp(1000);//hide clicked close button's panel
});

HTML：

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>

<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>

<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

Answer 3

看看这个question/answer。

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

jQuery多个隐藏和显示面板

3 个答案: