如何手动应用手风琴效果

Question

我已经制作了一些可以通过点击方框标题进行扩展和隐藏的方框。我刚刚使用了slideToggle（）来制作它。我需要另一种效果。这是我的小提琴：http://jsfiddle.net/qheJQ/

在此，我有三个方框：慢任务，不同类型的任务和快速任务当有人点击时慢任务，该框将被展开。如果用户再次单击慢速任务，则该框将被隐藏。如果用户没有再次点击隐藏慢速任务框并单击不同类型的任务，则该框将保持展开状态。所以，我想，当用户点击不同类型的任务时，此框将被展开，如果它们像this accordion那样被扩展，则会隐藏其他框。

如何在不使用任何手风琴插件的情况下获得此？

我的剧本：

$('.title').click(function() {
    $(this).children('.arrow').toggleClass('arrow_up');
    $(this).next('.box_expand').slideToggle();
 });

Answer 1

以下是您的代码应该有效的一些mod -

$('.title').click(function() {
    $('.title').not( $(this) ).find('.arrow').removeClass('arrow_up');
    $('.title').not( $(this) ).next('.box_expand').slideUp();
    $(this).next('.box_expand').slideToggle();
    $(this).find('.arrow').toggleClass('arrow_up');
 });

在这个小提琴中进行测试 - http://jsfiddle.net/jayblanchard/qheJQ/1/