切换列表图像并展开所有带有无序列表的jQuery手风琴

Question

我有一个使用纯无序列表的可运行的jQuery手风琴。 我正在尝试合并2个功能。

这是我运行中的手风琴代码及其工作示例。 http://jsbin.com/itibi4/

1. 切换箭头。

我正在努力使父项目符号成为切换箭头，并在单击时指向下方，而子项目符号则保留为项目符号而不是箭头。 我可以在这方面得到一些帮助吗？

.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');
            }
          }

非常感谢你的帮助！

埃文

Answer 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');
         }
      }

  );  // this was missing!

我在Chrome JavaScript控制台中添加了您的功能，并且可以正常工作。

至于您的箭头，目前以下规则使它们指向右侧：

ul.menu li

如果创建该规则的副本ul.menu li.dow​​n并进行以下更改：

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

然后确保将class =“ down”绑定到要向下指向的箭头。 您可能需要调整这些值，但这肯定会让您入门。