我使用瑞安Stemkoski的“愚蠢的简单的jQuery折叠式菜单”不同的图像可以在此处：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

例如，在上述网站上的单词“工作”应该是深灰色的图像被选择的工作部分时，所以当它被选择等

我不能应协同合作不知道如何做到这一点，任何帮助将不胜感激。

感谢，安德鲁

来源

2010-05-18 Andrew Cassidy

重述问题

好了，花了一番努力，但我想我明白你的问题。这里是事实（纠正我，如果我错了）：

您正在使用图像的手风琴标题（.accordionButton img）。
当“开”类应用于标题div（.accordionButton）时，您希望这些图像变暗。
您正在向标头div（使其成为.accordionButton.on）成功添加“开”类。
您尝试使用CSS属性background更改背景颜色。
您的图像具有纯色背景色和以img标记进行了硬编码，而不是以CSS作为background-image。

简而言之，问题不在于手风琴插件，而在于正常和“开启”时，对于.accordionButton使用CSS和HTML。

第一步

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

从这里得到的主要结论是，您实际上不能通过CSS background属性影响图像的背景颜色。正如您声明的那样，浏览器会尝试在图像后面绘制画布（div），并且由于图像不透明，图像的背景颜色将保持不变。

解决方案

最简单的答案，恐怕你要找的人，仅仅是使用当前图像（S），但取出背景颜色。这将允许CSS像你想要的那样绘制背景。请记住，图像中的部分（在这种情况下是字母）将不能单独由CSS进行更改。

这里有一些其他的选择，如果不为你工作：

尝试没有图像这样做，只能用文字，使事情变得更容易使用CSS来操作。（如果Arial/Helvetica不会为你做，你将不得不为此自定义字体路线，can be tricky。）

使用背景图片并更改background-image CSS规则，当标题为'on'时。

使用jQuery来更改img标记中的src属性或类似技术。

来源

2010-05-19 09:13:04

jQuery的手风琴 - 主动段

回答

重述问题

第一步

解决方案

相关问题