Question

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

Here is my functioning accordion code and a demo of it working. http://jsbin.com/itibi4/

切换箭头。

我想让父母子弹成为一个翻转箭头并在点击时指向下方，而子弹则保持为子弹而不是箭头。我可以得到一些帮助吗？

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

全部展开/全部折叠

另外，我正在尝试合并展开全部/折叠所有功能。 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.menu li

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

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

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

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

1 个答案: