Динамическое расширение и свертывание Jquery - PullRequest
0 голосов
/ 11 октября 2010

Я почти закончил с этим, поэтому у меня есть еще одна ошибка, которую мне нужно выяснить.

Сначала я начну с проблемы ...

Демонстрация: 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');
            }
          }
        );
  });

Спасибо за помощь!

С уважением, Эван

1 Ответ

1 голос
/ 11 октября 2010

Я бы проверил текущий текст, чтобы устранить путаницу, заменив эту проверку:

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

На эту:

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

Вы можете проверитьздесь .

...