切換列表圖像並展開所有jquery accordion w /無序列表

Question

我有一個運行正常的使用純無序列表的jquery手風琴。我正在嘗試合併2個功能。

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. 全部展開/全部摺疊

另外，我試圖將一個展開所有/摺疊所有功能。代碼來自以前的項目，我在無序列表菜單下添加了這個代碼，但是我很難將它加入到這個項目中。我能夠得到一些幫助嗎？

$('.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李

如果創建規則的副本稱爲ul.menu li.dow​​n，使以下變化：

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

然後確保class =「down」被綁定到你想要指向的箭頭。你可能需要調整這些值，但這肯定會讓你開始。