Переключение класса запроса для изменения фонового изображения диапазона не работает

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

Ситуация:
У меня есть аккордеонное меню, в котором есть изображения плюса и минуса, которые отображаются в левой части меню. Я хочу, чтобы они менялись, когда дочерняя таблица видна.

в моем коде есть ошибка, которая не позволяет этому произойти. он изменится на минус, когда вы выберете одну из опций, и изменится на плюс, когда вы выберете другую опцию.

Проблема: после расширения области класс аккордеона не изменится, если вы еще раз щелкнете по опции видимости, чтобы свернуть элемент.

Вот демонстрация jsfiddle http://jsfiddle.net/mKUNs/.


javascript class toggle jquery jquery-ui-accordion
person Deac Karns    schedule 12.09.2011    source источник
comment
таблица предназначена для некоторого загружаемого в нее содержимого ajax.   -  person Deac Karns    schedule 12.09.2011
comment
С внешними таблицами стилей все в порядке, со встроенными стилями все в порядке, а смешивать оба стиля очень вредно.   -  person Blazemonger    schedule 12.09.2011
comment
Вам нужно спрятать ранее открытую коробку?   -  person Roko C. Buljan    schedule 12.09.2011

Ответы (1)


arrow_upward
1
arrow_downward

Вот исправленная версия. Но не используйте его.

Ваш документ очень плохо структурирован. У вас есть таблицы только с одной ячейкой, и связь между заголовком и переключаемым разделом осуществляется только по смежности. Вам лучше изменить свою разметку, чтобы каждый аккордеон был окружен <div>/<section>.

Кроме того, вы переборщили с использованием id, и весь ваш CSS должен быть удален из документа. align="center" следует не использовать. Наконец, зачем путать вещи, имея класс для expanded и collapsed? Они взаимоисключающие, поэтому используйте только один класс!

Вот как вы должны это сделать:

HTML

<div class='accordian'>
    <h3><span class='icon'></span>Option 1</h3>
    <div>
        the box should be black now, if you click this option
        again it should turn white
    </div>
</div>
<div class='accordian' id='weekly'>
    <h3><span class='icon'></span>Option 2</h3>
    <div>
        the box should be black now, if you click this option
        again it should turn white
    </div>
</div>

CSS:

.accordian h3 {
    background-color:#689937;
    color:#fff;
    height:30px;
}
.accordian .icon {
    background-color:#fff;
    background-size:25px;
    background-repeat: no-repeat;
    height:25px;
    width:25px;
    padding-left:5px;
    float:left;
}
.accordian.collapsed .icon {
    background-color:#000;
}

jQuery

$('.accordian').each(function() {
    var accordian = $(this);
    var header = accordian.find('h3');
    var content = accordian.find('div');

    header.click(function() {
        content.slideToggle('medium');
        accordian.toggleClass('collapsed');
    });

    content.hide();
    accordian.addClass('collapsed');
});
person Eric    schedule 12.09.2011
comment
Таблицы были там для того, чтобы при загрузке документа могли отображаться три варианта, а все остальное было бы скрыто. когда пользователь нажимает на один из этих трех вариантов, встроенная область div становится видимой внутри таблицы. - person Deac Karns; 12.09.2011
comment
@peledies: Но почему table? - person Eric; 12.09.2011