jQuery .slideToggle將不會工作，具體取決於具體

Question

我使用jQuery來隱藏/顯示內容，它的工作原理，但不是我想要的方式。 我的元素的層次結構如下所示：

<div class="row"> 
    <div class="column"> 
     <a href="">Show/Hide</a> 
    </div> 
    <div class="column hide-id">blahblahblah</div> 
</div> 

下面的代碼：

$(document).ready(function(){ 
    $('.hide-id').hide(); 
    $('.column > a').click(function() { 
     $('.hide-id').slideToggle(500); 
      return false; 
     }); 
    }); 
}); 

問題在於：

$('.hide-id').slideToggle(500); 

它可以正常工作，但我有這個「躲-id「類多次重複，這意味着每次點擊」.column a「時，每個單獨的div都會顯示」hide-id「，而不是單擊我單擊的單個div。

我想它的變體，如：

$(this).parent().next().slideToggle(500); 
this = .column a + .parent() = .column + .next() = .column that contains .hide-id 

但是，當我改變.slideToggle從.hide-id到別的東西，應該工作，腳本響應就像我的選擇是無效的，因爲它沒有任何響應。

有沒有辦法讓$('.hide-id').slideToggle(500);工作，還是我需要找到一個替代方案？我已經嘗試過應用它，但是我沒有正確地做，或者它不起作用。

Answer 1

在你的代碼，你在做什麼是when you click the show/hide link you are toggling all the .hide-id class object所以你可以這樣說：http://jsbin.com/obemoc/1/edit

$(document).ready(function(){ 
    $('.hide-id').hide(); 
     $('.column > a').click(function() { 
     $(this).parents('div.row').children('.hide-id').slideToggle(500); 
     return false; 
    }); 
}); 

這裏我們發現從單擊所需的孩子聯繫家長，並切換幻燈片功能。