jQuery使用标题展开/折叠

Question

我尝试过使用手风琴插件，但它不起作用，我知道使用纯jQuery有一个更简单的解决方案。

从本质上讲，我希望当您使用<h2>点击class="expand"时，它应该使用class="collapse"“展开”下一个div。默认情况下，所有div都应折叠。

非常感谢任何帮助，提前谢谢！

出于测试目的，请参阅此jsFiddle演示。

Answer 1

这很简单，只需使用下面的

即可

$('.expand').click(function() {
  $(this).next('.collapse').slideToggle(); // or use .toggle() for no animation
});

小提琴： http://jsfiddle.net/garreh/WQYc7/2/

---

默认情况下要折叠，只需添加以下css：

.collapse {
    display: none;
}

Answer 2

jsFiddle demo 的

$('h2.expand').click(function(){
 var co = $('.collapse')
 var el = $(this).next(co);   
 var doit =  el.is(':hidden') ? ( co.slideUp(), el.slideDown() ) : co.slideUp() ;
});

它会在折叠关闭的元素之前隐藏所有已打开的元素。
如果元素被打开，它会切换打开状态。

Answer 3

使用jQuery，我已经更新了你的小提琴。

<强> HTML ：

<div id="accordion">
<h2 class="toggle">Click to expand and collapse</h2>

<div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>

<h2 class="toggle">Click to expand and collapse 2</h2>
<div class="pane"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>
</div>

的的Javascript ：

<script>
$(document).ready(function() {
  $('#accordion h2').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    $(this).toggleClass('current').siblings('h2').removeClass('current');
    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
      $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  });
});​
</script>

<强> CSS：

.toggle { 
    background: gray;
    padding: 5px;
    cursor: pointer;
}
.pane { display: none; }
​.current { background: green }

Answer 4

我刚刚写了一个插件，就是这样做的。

请参阅http://redhotsly.github.com/simple-expand/