Использование jQuery для открытия и закрытия ближайшего div при щелчке элемента переключения

Я работаю над страницей «Карьера», на которой будет отображаться краткий предварительный просмотр описания работы вместе с переключателем, который при нажатии будет скользить вниз, чтобы показать более подробную информацию о публикации.

Разметка выглядит так:

<div>
    <div class="career-excerpt">
        <p>Preview text goes here</p>
    </div>
    <div class="career-details">
        <p>Longer explanation / detail text goes here</p>
    </div>
    <p><a class="toggle" href="#">Show Details</a></p>
</div>

А вот jQuery, который я использую, чтобы открыть раздел сведений:

$(".career-details").hide();
$(".toggle").click(function () {
    $(".career-details").toggle("fast",function() {
        $('.toggle').text(
          $(this).is(':visible') ? "Hide Details" : "Show Details"
        );
    });
});

Это работает, чтобы открыть детали и изменить текст с «Показать детали» на «Скрыть детали». Однако на каждой странице будет несколько сообщений, и с этим кодом однократное нажатие переключателя приведет к открытию всех описаний.

Я бы хотел, чтобы переключатель открывал только div «career-details» внутри того же родительского div переключателя, на который нажали.

Я пробовал изменить:

$(".career-details").toggle("fast",function() {

to:

$(this).closest(".career-details").toggle("fast",function() {

но после этого переключатели вообще не работают. Любые идеи будут высоко оценены, спасибо!


html toggle jquery closest
person R.J.    schedule 13.08.2012    source источник

Ответы (3)


arrow_upward
6
arrow_downward

.toggle не является потомком .career-details, поэтому то, что вы сделали, не сработает, попробуйте следующее:

$(this).closest("div").find(".career-details").toggle("fast",function() {....});
person mgraph    schedule 13.08.2012
comment
Круто, это сработало и имеет смысл. Спасибо за ответ и объяснение! - person R.J.; 13.08.2012

arrow_upward
1
arrow_downward

Вы почти у цели, единственная проблема заключается в том, как вы пытаетесь найти элемент .career-details.

Это было бы:

$(this).parent().siblings(".career-details").toggle("fast",function() {
person Robin    schedule 13.08.2012

arrow_upward
1
arrow_downward 

$(".toggle").click(function() {
    var that = $(this); //that == clicked Element
    that.parent().prev().toggle("fast", function() {
        that.text($(this).is(':visible') ? "Hide Details" : "Show Details");
    });
});

Скрипка

Если у вас есть больше элементов между родителем .toggle p и div, который вы переключаете, вы можете использовать более надежный селектор (некоторая потеря производительности, но работает так же):

var that = $(this);
that.parent().prevAll('.career-details').first().toggle("fast", function() {

Скрипка

person Fabrício Matté    schedule 13.08.2012