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/