Функция jQuery slidetoggle прерывается при добавлении дополнительного div - PullRequest
Новая
       12

Функция jQuery slidetoggle прерывается при добавлении дополнительного div

0 голосов
/ 03 июня 2011

Функция, представленная ниже, действует как аккордеон слайд-тумблера (для списка сообщений Wordpress) и выполняет ряд функций, таких как переключение, добавление активных классов и «отмена» открытия div с открытым переключателем. Хорошо работал с тремя div-объектами - .entry-post, .entry-title и .entry-content - пока ... не дождался ... Мне нужно было добавить еще один div в разметке.

Другой div, который мне нужно было добавить, относится к дате публикации, и с этим четвертым div, действие аккордеона прерывается, потому что функция действует при определении следующего div.

Как я могу заставить эту функцию принимать во внимание и игнорировать дату, которую я должен был добавить в разметку? (Я не могу изменить div на span.)

JSfiddle здесь: http://jsfiddle.net/WnpGv/53/

Функция: 

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.next(".entry-content");
    if (! $this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

Основная разметка: 

<div class="entry-post">

    <h2 class="entry-title">Post Title 1</h2>

    <div class="thedate">(publication date)</div> <!--this is the div I added -->

<div class="entry-content">Lorem Ipsum  Lorem Ipsum</div></div>

1 Ответ

2 голосов
/ 03 июня 2011

Вы не можете изменить next(), оно всегда смотрит на следующий элемент одного брата:

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

[Акцент мой.]

Однако вы можете использовать parent() и find(): 

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.parent('.entry-post').find(".entry-content");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

JS Fiddle .

<ч />

Отредактировано для использования closest('.entry-post') вместо parent('.entry-post'): 

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.parent('.entry-post').find(".entry-content");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

JS Fiddle .

Ссылки:

...