使用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

回答

相關問題