重述问题

Question

我正在使用Ryan Stemkoski的“Stupid Simple 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

例如，在上面的网站中，当选择工作区时，单词“WORK”应该是一个较暗的灰色图像，因此在选择它时应该是COLLAB等。

我无法弄清楚如何做到这一点，任何帮助将不胜感激。

谢谢，安德鲁

Answer 1

重述问题

好的，它花了一些时间，但我想我理解你的问题。以下是事实（如果我错了，请纠正我）：

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

简而言之，这个问题与手风琴插件没有关系，而是在.accordionButton正常时以及“开启”时使用CSS和HTML。

第一步

您需要熟悉的第一件事是3-D CSS框模型（original和interactive可视化）。

这方面的主要内容是，您实际上无法通过CSS background属性影响图像的背景颜色。正如您所声明的那样，浏览器将尝试在图像后面绘制画布（div），并且由于您的图像不是透明的，因此图像的背景颜色将保持不变。

解决方案

最简单的答案，也许是您正在寻找的答案，只是使用您当前的图像，但取出背景颜色。这将允许CSS绘制您想要的背景。请记住，单独的CSS无法更改图像中的部分（在本例中为字母）。

以下是一些其他选项，如果这对您不起作用：

尝试在没有图像的情况下执行此操作，仅使用文本，使用CSS操作更容易。（如果Arial / Helvetica不会为你做，你必须为此自定义字体路线，can be tricky。）
使用背景图片并更改标题为'on'时的background-image CSS规则。
使用jQuery更改src标记中的img属性或类似技术。

jQuery手风琴 - 活动部分的不同图像

1 个答案:

重述问题

第一步

解决方案