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/