не работает класс запроса, чтобы изменить фоновое изображение диапазона - PullRequest
Новая
       17

не работает класс запроса, чтобы изменить фоновое изображение диапазона

0 голосов
/ 12 сентября 2011

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

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

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

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

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

1 Ответ

1 голос
/ 12 сентября 2011

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

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

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

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

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');
});
...