javascript - 切换列表图像并展开所有带有无序列表的 jquery Accordion

Question

我有一个使用纯无序列表的功能 jquery Accordion 。我正在尝试合并两项功能。

Here is my functioning accordion code and a demo of it working. 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. 全部展开/全部折叠

此外，我正在尝试合并全部展开/折叠全部功能。 this is code to the same demo该代码来自以前的项目，我已将其添加到无序列表菜单下方，但我很难将其合并到该项目中。我能得到一些帮助吗？

$('.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.菜单里

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

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

然后确保 class="down"绑定(bind)到您想要向下的箭头。您可能需要调整这些值，但这肯定会帮助您入门。