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

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

0 голосов
/ 18 мая 2010

Я использую «Stupid Simple Jquery Accordion Menu» Райана Стемкоски, который доступен здесь:

stemkoski.com / глупо-простой JQuery-аккордеон меню /

Вот 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

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

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

Спасибо, Andrew

1 Ответ

0 голосов
/ 19 мая 2010

Решение проблемы

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

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

Проблема, в двух словах, связана не с плагином accordion, а с вашими CSS и HTML для .accordionButton, когда это нормально и когда он включен.

Первый шаг

Первое, с чем вам нужно ознакомиться - это трехмерная блочная модель CSS ( оригинальная и интерактивная визуализация).

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

* Решения 1042 * Самый простой ответ, и, вероятно, тот, который вы ищете, это просто использовать ваши текущие изображения, но уберите цвет фона . Это позволит CSS рисовать фон так, как вы хотите. Просто помните, что часть, которая в изображении (в данном случае буквы), не может быть изменена одним только CSS. Вот некоторые другие варианты, если это не сработает для вас: Попробуйте сделать это без изображений, используя только текст, упрощая манипуляции с помощью CSS. (Если Arial / Helvetica не подойдет вам, для этого вам придется пройти маршрут пользовательских шрифтов, который может быть хитрым .) Используйте фоновые изображения и измените правило CSS background-image, когда заголовок включен. Используйте jQuery для изменения атрибута src в теге img или аналогичного метода.

...