单击切换元素,使用jQuery打开和关闭最近的div

Question

我正在制作一个职业页面,该页面将显示工作描述的简短预览以及切换,单击该切换时,将向下滑动以显示发布的更多详细信息.

标记看起来像这样:

<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内打开"职业细节"div.

我试过改变:

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

至:

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

但在那之后,肘节似乎根本不起作用.任何想法将不胜感激,谢谢!

Answer 1

.toggle不是孩子,.career-details所以你所做的不会起作用,试试这个:

$(this).closest("div").find(".career-details").toggle("fast",function() {....});