0

我正在开发一个职业页面，该页面将显示职位描述的简短预览以及一个切换按钮，单击该切换按钮时，将向下滑动以显示发布的更多详细信息。

标记如下所示：

<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() {

但在那之后，切换似乎根本不起作用。任何想法将不胜感激，谢谢！

4

4 回答 4

6

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

$(this).closest("div").find(".career-details").toggle("fast",function() {....});
于 2012-08-13T17:09:27.567 回答
2

$(this).parent().find('.career-details').toggle('fast', function(){

于 2012-08-13T17:10:02.610 回答
1

你快到了，唯一的问题是你如何试图找到.career-details元素。

这将是：

$(this).parent().siblings(".career-details").toggle("fast",function() {
于 2012-08-13T17:10:08.367 回答
1 
$(".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() {

小提琴

于 2012-08-13T17:13:50.140 回答