jQuery的手風琴 - 主動段

Question

我使用瑞安Stemkoski的「愚蠢的簡單的jQuery摺疊式菜單」不同的圖像可以在此處：

stemkoski.com/stupid-simple-jquery-accordion-menu/

這裏是JavaScript

$(document).ready(function() { 

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
    $('.accordionButton').click(function() { 

     //REMOVE THE ON CLASS FROM ALL BUTTONS 
     $('.accordionButton').removeClass('on'); 

     //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
     $('.accordionContent').slideUp('normal'); 

     //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
     if($(this).next().is(':hidden') == true) { 

     //ADD THE ON CLASS TO THE BUTTON 
     $(this).addClass('on'); 

     //OPEN THE SLIDE 
     $(this).next().slideDown('normal'); 
     } 

     }); 


    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 

    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    $('.accordionButton').mouseover(function() { 
     $(this).addClass('over'); 

    //ON MOUSEOUT REMOVE THE OVER CLASS 
    }).mouseout(function() { 
     $(this).removeClass('over');   
    }); 

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ 


    /******************************************************************************************************************** 
    CLOSES ALL S ON PAGE LOAD 
    ********************************************************************************************************************/ 
    $('.accordionContent').hide(); 

    }); 

和CSS

#wrapper { 
width: 800px; 
margin-left: auto; 
margin-right: auto; 
} 
.accordionButton { 
width: 800px; 
float: left; 
_float: none; /* Float works in all browsers but IE6 */ 
background: #003366; 
border-bottom: 1px solid #FFFFFF; 
cursor: pointer; 
} 

.accordionContent { 
width: 800px; 
float: left; 
_float: none; /* Float works in all browsers but IE6 */ 
background: #95B1CE; 
} 

/*********************************************************************************************************************** 
EXTRA STYLES ADDED FOR MOUSEOVER/ACTIVE EVENTS 
************************************************************************************************************************/ 

.on { 
background: #990000; 
} 

.over { 
background: #CCCCCC; 
} 

有是一個「on」類，它允許accordionButton類在活動時的風格，但我希望能夠讓每個活動的accordionButton類具有不同的圖像。

http://www.thepool.ie

例如，在上述網站上的單詞「工作」應該是深灰色的圖像被選擇的工作部分時，所以當它被選擇等

我不能應協同合作不知道如何做到這一點，任何幫助將不勝感激。

感謝， 安德魯

Answer 1

重述問題

好了，花了一番努力，但我想我明白你的問題。這裏是事實（糾正我，如果我錯了）：

1. 您正在使用圖像的手風琴標題（.accordionButton img）。
2. 當「開」類應用於標題div（.accordionButton）時，您希望這些圖像變暗。
3. 您正在向標頭div（使其成爲.accordionButton.on）成功添加「開」類。
4. 您嘗試使用CSS屬性background更改背景顏色。
5. 您的圖像具有純色背景色和以img標記進行了硬編碼，而不是以CSS作爲background-image。

簡而言之，問題不在於手風琴插件，而在於正常和「開啓」時，對於.accordionButton使用CSS和HTML。

第一步

你需要熟悉的第一件事是3 d CSS盒模型（original和interactive可視化）。

從這裏得到的主要結論是，您實際上不能通過CSS background屬性影響圖像的背景顏色。正如您聲明的那樣，瀏覽器會嘗試在圖像後面繪製畫布（div），並且由於圖像不透明，圖像的背景顏色將保持不變。

解決方案

最簡單的答案，恐怕你要找的人，僅僅是使用當前圖像（S），但取出背景顏色。這將允許CSS像你想要的那樣繪製背景。請記住，圖像中的部分（在這種情況下是字母）將不能單獨由CSS進行更改。

這裏有一些其他的選擇，如果不爲你工作：

1. 嘗試沒有圖像這樣做，只能用文字，使事情變得更容易使用CSS來操作。 （如果Arial/Helvetica不會爲你做，你將不得不爲此自定義字體路線，can be tricky。）
2. 使用背景圖片並更改background-image CSS規則，當標題爲'on'時。
3. 使用jQuery來更改img標記中的src屬性或類似技術。