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

Question

我正在使用 Ryan Stemkoski 的“Stupid Simple Jquery Accordion Menu”，可在此处找到：

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”应该是选择工作部分时会出现较深的灰色图像，因此在选择工作部分时应该进行协作等。

我不知道如何做到这一点，任何帮助将不胜感激。

谢谢， 安德鲁

Answer 1

重述问题

好吧，这需要一些努力，但我想我理解你的问题。以下是事实（如果我错了，请纠正我）：

1. 您正在使用手风琴标题的图像 (.accordionButton img)。
2. 当“on”类应用于标题 div (.accordionButton) 时，您希望这些图像变得更暗。
3. 您已成功将“on”类添加到标头 div（使其成为 .accordionButton.on）。
4. 您尝试使用 CSS 属性 background 更改背景颜色。
5. 您的图像具有纯色背景并且通过img标签进行硬编码，而不是使用CSS作为background-image。

简而言之，这个问题与 Accordion 插件无关，而与 .accordionButton 的 CSS 和 HTML 有关（当它正常且处于“打开”状态时）。

第一步

您需要熟悉的第一件事是 3-D CSS 盒模型 (原始和交互式可视化）。

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

解决方案

最简单的答案（可能也是您正在寻找的答案）就是使用当前图像，但去掉背景颜色。这将允许 CSS 按照您想要的方式绘制背景。请记住，图像中的部分（在本例中为字母）无法仅通过 CSS 进行更改。

如果这对您不起作用，这里还有一些其他选项：

1. 尝试在不使用图像的情况下仅使用文本来执行此操作，这样可以更轻松地使用 CSS 进行操作。 （如果 Arial/Helvetica 不适合您，您必须采用自定义字体路线，即 可能会很棘手。）
2. 使用背景图像并更改标题“打开”时的background-image CSS 规则。
3. 使用 jQuery 更改 img 标记中的 src 属性，或类似的技术。