jQuery nextAll () - щелчок по h-элементу переключает все p-элементы до следующего часа. - PullRequest
Новая
       9

jQuery nextAll () - щелчок по h-элементу переключает все p-элементы до следующего часа.

0 голосов
/ 14 февраля 2011

Я нашел пример кода jQuery, и я пытаюсь адаптировать и реализовать его.Я создаю страницу часто задаваемых вопросов, где ответ переключается нажатием на вопрос.Вопрос h1, и ответ - несколько элементов "p".

Например: 

<h1>The First Question</h1>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h1>Second Question</h1>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

Мой JS-код: 

$(document).ready(function(){

    $(".accordion h1:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h1").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h1").removeClass("active");
    });

});

Проблема в том, что этот JS переключает только первый элемент p на странице.Как я могу переключать все p элементов, принадлежащих к определенному вопросу, используя NextAll ()?Все остальное необходимо (брат и т. Д.), И я не могу использовать div или классы.

Спасибо!

1 Ответ

2 голосов
/ 14 февраля 2011

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

В этом случае мы используем not-selector (документы) , чтобы выбрать элементы, пока не достигнем элемента, который не <p> элемент. 

$(this).nextUntil(':not(p)').slideToggle(...

Если вы хотите сдвинуть другие элементы, вы можете использовать not() (документы) метод для исключения тех, кого вы только что переключили. 

var togg = $(this).nextUntil(':not(p)').slideToggle(...

togg.siblings('p:visible').not(togg).slideUp(...
...