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

我正在工作职位页面上，该页面将显示工作描述的简短预览以及切换，点击切换时，该切换将滑动以显示更多发布的详细信息。使用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的“职业细节”div。

我试着改变：

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

到：

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

但在这之后似乎是切换不会在所有的工作。任何想法将不胜感激，谢谢！

来源

2012-08-13 R.J.

.toggle不是.career-details所以你压根行不通的孩子，试试这个：

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

来源

2012-08-13 17:09:27 mgraph

太棒了，这个工作很有意义。谢谢你的回答和解释！ – 2012-08-13 17:19:12

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

来源

2012-08-13 17:10:02 Ohgodwhy

你几乎没有，唯一的问题是你如何试图找到.career-details元素。

这将是：

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

来源

2012-08-13 17:10:08 Robin

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

Fiddle

如果你有.toggle的父p和你拨动div之间更多的元素，你可以使用更坚固选择器（一些性能损失但工作原理相同）：

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

Fiddle

来源

2012-08-13 17:13:50

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

回答

相关问题