Jquery手风琴展开全部收起全部

问题描述:

我正在寻找一种包含“全部展开”和“全部折叠”的方法。我已经使用简单的jQuery手风琴用新代码更新了演示。Jquery手风琴展开全部收起全部

原始代码应记入瑞安Stemkoski http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

演示:http://jsbin.com/ucalu3/5/

$(document).ready(function() { 
    $('.question').click(function() { 

    if($(this).next().is(':hidden') != true) { 
       $(this).removeClass('active'); 
    $(this).next().slideUp("normal"); 
    } else { 
    $('.question').removeClass('active'); 
    $('.answer').slideUp('normal'); 
    if($(this).next().is(':hidden') == true) { 
    $(this).addClass('active'); 
    $(this).next().slideDown('normal'); 
    } 
    } 
    }); 

    $('.answer').hide(); 

    $('.expand').click(function(event) 
    {$('.question').next().slideDown('normal'); 
     {$('.question').addClass('active');} 
    } 
); 

    $('.collapse').click(function(event) 
    {$('.question').next().slideUp('normal'); 
     {$('.question').removeClass('active');} 
    } 
); 
}); 
+0

只是想指出,你不需要编辑,包括“解决”,一旦你得到答案的题目。答案已被接受时,主页上的答案数将从白色变为黄色,表示问题已解决。 – 2010-10-09 20:23:10

+0

感谢这个问题和答案...这救了我... – 2012-09-27 14:59:25

我想补充一个类或ID来展开和折叠的链接,然后是这样的将工作

$(document).ready(function() { 
    $("#expand").click(function(){ 
    ('.answer').slideDown('normal'); 
    }); 

    $("#collapse").click(function(){ 
    ('.answer').slideUp('normal'); 
    }); 
} 
+0

感谢您的提示。我修改了代码以使其工作。 – Evan 2010-10-09 20:17:17

这可以更容易解决。

只需在要展开/折叠的accordion元素('.ui-widget-content')上使用jQuery hide/show命令即可。

例如:

$(document).ready(function() { 
     $('.expand').click(function() { 
      $('.ui-widget-content').show(); 
     }); 
     $('.collapse').click(function() { 
      $('.ui-widget-content').hide(); 
     }); 
}); 

见琴:http://jsfiddle.net/ekelly/hG9b5/11/