JQuery аккордеон - другое изображение для активных разделов

Question

я использую "Stupid Простой Jquery Accordion Menu" Райана Stemkoski, который доступен здесь:

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

Например, в приведенном выше месте слово «РАБОТА» должна быть более темным серое изображение при выборе раздела работы, поэтому следует совм, когда он выбран и т.д.

Я могу» t выяснить, как это сделать, любая помощь будет принята с благодарностью.

Спасибо, Andrew

Answer 1

Подтвердив проблему

Ладно, потребовалось некоторое делать, но я думаю, я понимаю вашу проблему. Вот факты (исправьте меня, если я ошибаюсь):

1. Вы используете картинки для аккордеонных заголовков (.accordionButton img).
2. Вы хотите, чтобы эти изображения стали более темными, когда класс 'on' применяется к заголовку div (.accordionButton).
3. Вы успешно добавляете класс 'on' в заголовок div (что делает его .accordionButton.on).
4. Вы попытались изменить цвет фона с помощью свойства CSS background.
5. Ваши изображения имеют сплошной цвет фона и являются жестко закодированными тегом img, а не с CSS как background-image.

Проблема, в общем, не надо делать с аккордеона плагин, но с помощью CSS и HTML для .accordionButton когда это нормально, и когда это «на».

Первый шаг

Первое, что вам нужно, чтобы ознакомиться с это модель блочную 3-D (original и interactive визуализаций).

Основной вывод из этого заключается в том, что вы не можете влиять на цвет фона изображения с помощью свойства CSS background. Как вы заявили, браузер попытается покрасить холст (div) за изображение, а так как ваше изображение не прозрачно, фоновый цвет изображения останется неизменным.

Solutions

Самый простой ответ, и, вероятно, тот, который вы ищете, просто использовать текущее изображение (я), но вынимают цвет фона. Это позволит CSS рисовать фон, как вы хотите. Просто помните, что часть на картинке (в данном случае буквы) не смогут быть изменены только с помощью CSS.

Вот некоторые другие варианты, если это не будет работать для вас:

1. Попробуйте сделать это без изображений, используя только текст, что делает вещи намного легче манипулировать с помощью CSS. (Если Arial/Helvetica не будет делать для вас, вам нужно будет использовать для этого стандартный маршрут шрифтов, который can be tricky.)
2. Используйте фоновые изображения и измените правило CSS background-image, когда заголовок «включен».
3. Используйте jQuery, чтобы изменить атрибут src в свой тег img или аналогичную технику.