2

这个想法是在右侧有一个类似于这个的过滤器： - 过滤器切换示例

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

任何帮助都会很棒，

谢谢

4

3 回答 3

2

您可以使用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 here

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

​或者如果你喜欢褪色...... JSFiddle here

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

​</p>

于 2012-07-11T10:22:23.533 回答
0

您可以使用此敲击显示和隐藏多个面板；

这是演示

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>

​</p>

于 2012-07-11T10:22:50.873 回答
0

看看这个问题/答案。

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});
于 2012-07-11T10:25:24.810 回答