动态展开和折叠jquery

Question

我几乎完成了这个，所以我有一个最终的错误，我需要你的帮助搞清楚。

我就这个问题首先启动...

演示：http://jsbin.com/ucalu3/7/

方案3不起作用。当你点击“全部展开”并点击一个问题来折叠答案时，它工作得很好。现在的问题是，现在点击“全部折叠”，它将扩大所有的答案。我希望它实际上崩溃所有的答案就像“全部崩溃”链接说，它应该而不是扩大所有的答案。

另2种情景工作得很好，它们是：

方案1级的作品。 （刷新页面以重置手风琴）当您单击“全部展开”时，它将更改为“全部折叠”。答案将相应扩展，并且活动问题状态将适当地交换。当您单击“全部折叠”时，所有问题/答案将返回到其默认状态。

情景2的作品。 （刷新页面重置手风琴）当您先点击一个问题，然后点击“全部展开”，它将展开所有答案，当您点击“全部折叠”时，它会折叠所有答案。

---

代码

$(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(); 

     $('.swap').click(function() 

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

谢谢您的帮助！

真诚， 埃文

Answer 1

我会检查针对当前的文本，以消除任何混乱，通过更换此检查：

if($('.question').next().is(':hidden') != true) 

有了这一个：

if($(this).text() == 'Collapse All') 

You can test it out here。