Переключить изображение списка и развернуть все аккордеонные jquery с неупорядоченными списками - PullRequest
Новая
       11

Переключить изображение списка и развернуть все аккордеонные jquery с неупорядоченными списками

1 голос
/ 08 января 2011

У меня есть функционирующий jquery аккордеон, использующий чисто неупорядоченные списки.Я пытаюсь включить 2 части функциональности.

Вот мой действующий код аккордеона и демонстрация его работы. http://jsbin.com/itibi4/

  1. Toggling Arrows.

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

.inactive { 
background-image:url("http://img547.imageshack.us/img547/4103/arrowp.gif");
background-position:4px -31px;
background-repeat:no-repeat;
cursor:pointer;
padding-left:20px;
padding-top:10px;
}

.active {
background-image: url("http://img547.imageshack.us/img547/4103/arrowp.gif");
background-position: 4px 12px;
background-repeat:no-repeat;
font-weight:bold;
}
  1. Развернуть все / Свернуть все

также, я пытаюсь включить расширение всех / свернутьвесь функционал. это код той же демонстрации код из предыдущего проекта, который я добавил под меню неупорядоченного списка, но у меня возникли трудности с включением его в этот проект.Смогу ли я получить помощь? 

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

          {
            if($(this).text() == 'Click to Collapse All FAQs')
            {
              $('ul.menu').slideUp('normal');
              $('ul.menu li a').removeClass('active');
              $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
            }
            else
            {
              $('ul.menu').slideDown('normal');
              $('ul.menu li a').addClass('active');
              $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
            }
          }

Большое спасибо за помощь!

Эван

1 Ответ

1 голос
/ 08 января 2011

Я не вижу закрывающие скобки в конце вашего обработчика кликов: 

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

      {
         if($(this).text() == 'Click to Collapse All FAQs')
         {
           $('ul.menu').slideUp('normal');
           $('ul.menu li a').removeClass('active');
           $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
         }
         else
         {
           $('ul.menu').slideDown('normal');
           $('ul.menu li a').addClass('active');
           $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
         }
      }

  );  // this was missing!

Я добавил вашу функцию в консоль Chrome JavaScript, и она сработала.

Что касается ваших стрелок, то следующее правило в настоящее время заставляет их указывать вправо:

ul.menu li

Если вы создаете копию этого правила с именем ul.menu li.down и вносите следующие изменения: 

      background-position: 4px 0px;
      padding-top: 0px;

Затем убедитесь, что class = "down" привязан к стрелкам, которые вы хотите указать вниз. Возможно, вам придется настроить эти значения, но это определенно поможет вам начать работу.

...