Jquery手风琴全部展开/全部折叠

Question

我正在寻找一种方法来包含“展开全部”和“折叠全部”的功能。我已经使用一个简单的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');}
    }
  );
});

- Evan

---

只是想指出，你不需要在标题中加入“已解决”，一旦你得到答案。当一个答案被接受时，主页面上的答案计数将从白色变为黄色，以表示问题已经解决。 - user360907

由于这个问题和答案，谢谢...这救了我... - Fahim Parkar

Answer 1

这个问题可以更容易地解决。

只需在您想要展开/折叠的手风琴元素（'.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/

- user2500414

Answer 2

我会为展开和折叠的链接添加一个类或ID，然后像这样工作

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

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

- Sean