тег p будет скользить вниз, но не будет скользить вверх

Question

Имейте систему вопросов и ответов, где ответ начинается скрытно, затем, когда на вопрос нажимают, ответ сдвигается вниз. Это работает нормально, но тогда мне бы хотелось, чтобы, если затем на вопрос снова нажать, ответ снова сдвинется вверх. На данный момент это просто игнорирование этой команды. Класс удаления / добавления работает, поэтому я не могу думать, что еще это может быть?

HTML: <h2 class="traverse">What subjects are covered in the Core Knowledge Sequence UK?</h2> <p class="traversing">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</p>

Jquery:

$(".traverse").click(function(){
            $(this).next("p.traversing").slideDown();
            $(this).removeClass('traverse');
            $(this).addClass('traversed');
        });

$(".traversed").click(function(){
            $(this).next("p.traversing").slideUp();
            $(this).removeClass('traversed');
            $(this).addClass('traverse');
        });

Answer 1

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

Я бырекомендовать изменение подхода.Сохраняйте класс для элементов, которые можно переключать, и просто перемещайте вверх / вниз по мере необходимости, используя .toggle ();

например,

$('.collapsible').toggle(function(){
    $(this).next('p.traversing').slideUp();
  }, function(){
    $(this).next('p.traversing').slideDown();
  }
);

Вот демонстрационная версия: http://jsfiddle.net/7aVkx/1/

Answer 2

не подключать click обработчик несколько раз вместо использования slideToggle()

$(".traverse").click(function(){
            $(this).next("p.traversing").slideToggle();
            $(this).removeClass('traverse');
            $(this).addClass('traversed');
        });

Answer 3

Вы устанавливаете обработчик на все элементы класса .traversed, но в то время желаемые элементы не имеют этого класса .

Используйте .live вместо: *

$(".traverse").live('click', function(){
        $(this).next("p.traversing").slideDown();
        $(this).removeClass('traverse');
        $(this).addClass('traversed');
    });

$(".traversed").live('click', function(){
        $(this).next("p.traversing").slideUp();
        $(this).removeClass('traversed');
        $(this).addClass('traverse');
    });

Живая демоверсия.

---

^{* " Описание : присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем."}

Answer 4

$('p.traversing').slideUp();
$(".traverse").click(function() {
    $(this).removeClass('traverse').addClass('traversed');
    $(this).next("p.traversing").slideToggle();
});
$(".traversed").click(function() {
    $(this).next("p.traversing").slideToggle();
    $(this).removeClass('traversed').addClass('traverse');
});

Answer 5

Вы должны будете использовать .live для этого, поскольку вы (в ваших обработчиках кликов) постоянно добавляете / удаляете классы, которые используются для выбора элементов для обработки. Делать просто:

$(".traverse").click(....)

Не "отслеживает" будущие элементы, которые могут иметь класс "traverse". Он должен работать нормально, если вы будете использовать:

$(".traverse").live("click", ....)

Answer 6

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

$(".traversed").live("click",function(){});

Есть ли причина, по которой вы хотите изменить класс?Альтернативой может быть использование slideToggle() и оставление класса в покое.