IE 6 JQuery ошибка переключения класса!Помогите!

Question

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

Я столкнулся с проблемой с функцией JQuerys toogleClass. У меня есть CSS в стиле <button>, который переключается между плюсом и минусом изображения при нажатии. Это работает на всех браузерах, ожидающих IE6.

$('#searchForm #toggleButton').toggleClass('more');
$('#searchForm #toggleButton').toggleClass('less');
alert($('#toggleButton').attr('class')); <--- This displays 'less'

При первом отображении кнопка отображает правильное изображение. При нажатии на изображение все стили CSS исчезают. Класс «больше» удаляется, но класс «меньше» не применяется. Установка окна предупреждения для отладки показывает, что JQuery считает, что класс 'less' был установлен правильно, но браузер не применил его.

Я пытался использовать разные теги, такие как <div>, но та же проблема сохраняется.

Любая помощь приветствуется

РЕДАКТИРОВАТЬ Добавлены HTML и CSS

HTML

...
<div id="search-panel">
    <form action="/Search" class="search" id="searchForm" method="post"> 
    ...
        <div class="buttons">   
            <button type="submit" id="searchButton"></button>  
            <div class="loading"></div>  
            <button type="button" id="toggleButton" class="more"></button>
        </div>
    </form>
...
</div>
...

CSS

#search-panel .buttons #toggleButton.more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px;  }
#search-panel .buttons #toggleButton.less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat;  }

Answer 1

IE6 не понимает связывание CSS как:

div.class1.class2

Измените свой CSS на:

#search-panel .buttons .more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px;  }
#search-panel .buttons .less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat; 

И это будет работать

Answer 2

.toggleClass (className)

classNameOne или более имен классов (разделенные пробелами) для переключения для каждого элемента в соответствующем наборе.

Источник

Разве вы не должны писать код так:

$('#toggleButton').toggleClass('more less');