Jquery Accordion 展开全部 全部折叠

Posted 2023-03-24

【中文标题】Jquery Accordion 展开全部 全部折叠

【英文标题】：Jquery Accordion Expand All Collapse All

【发布时间】：2011-04-21 18:44:51

【问题描述】：

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

原始代码应归功于Ryan 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');
    
  );
);

【问题讨论】：

只是指出，一旦您得到答案，您无需编辑标题以包含“已解决”。当一个答案被接受后，主页上的答案计数将由白色变为黄色，表示问题已解决。

感谢这个问答...这救了我...

【参考方案1】：

这可以更容易解决。

只需在要展开/折叠的手风琴元素（'.ui-widget-content'）上使用 jQuery 隐藏/显示命令。

示例：

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

见小提琴：http://jsfiddle.net/ekelly/hG9b5/11/

【参考方案2】：

我会在展开和折叠链接中添加一个类或 ID，然后这样的东西就可以工作了

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

  $("#collapse").click(function()
    ('.answer').slideUp('normal');
  );