Question

我差不多完成了这个，所以我有一个最后的错误，我需要你的帮助搞清楚。

我先从问题开始......

方案3不起作用。当您单击“全部展开”并单击一个问题以折叠答案时，它可以正常工作。问题是，现在点击“全部折叠”，它将扩展所有答案。我希望实际上崩溃所有答案就像“全部崩溃”链接所说的那样，而不是扩展所有答案。

其他两种情况工作正常，即：

场景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

动态展开和折叠Jquery

1 个答案: