jQuery 多个隐藏和显示面板答案

【问题标题】：jQuery multiple hide and show panelsjQuery 多个隐藏和显示面板
【发布时间】：2012-07-11 10:15:15
【问题描述】：

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

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

任何帮助都会很棒，

谢谢

【问题讨论】：

您找到的插件与您链接的效果之间的唯一区别是后者在单击时不会显式关闭任何同级（即一次只允许打开一个）。

标签： jquery html hide toggle show

【解决方案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();
})

【讨论】：

这或多或少是我所追求的，但我有点需要扩展一些 div 来显示内容，其中一些需要点击才能显示内容。然后，当用户想要展开/折叠每个 div 时，他们可以这样做.. 可能在它旁边有一个 +/- 图标。与我附加的链接中的演示类似，它们如何具有不同的 div 变体展开和折叠？欢呼
@PaulBullock 我更改了代码，以便您可以在页面打开时展开或折叠某些面板。只需将“折叠”类添加到您最初要隐藏的内容中。例如，使用 css 可以很容易地添加加号/减号。（甚至使代码更简单！点击处理程序中的一行。）
太棒了！谢谢！！是否也可以在上面添加上下滑动或淡入淡出的效果？
@PaulBullock 更新了我的答案并添加了褪色支持！ ;-)

【解决方案2】：

看看这个question/answer。

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

【讨论】：

@Bart Riemens 这或多或少是我所追求的，但我有点需要扩展一些 div 来显示内容，其中一些需要单击才能显示内容。然后，当用户想要展开/折叠每个 div 时，他们可以这样做.. 可能在它旁边有一个 +/- 图标。与我附加的链接中的演示类似，它们如何具有不同的 div 变体展开和折叠？欢呼

【解决方案3】：

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

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>

【讨论】：