可切換所有內容的SlideToggle的多個實例

Question

我有以下在我的頁面上多次出現的腳本。我有一個簡單的滑動切換，連接到<div class="info">，並由<a rel="viewinfo">標記控制，但是當我點擊錨點時，所有帶有類信息的div都會滑動。

這裏是HTML/PHP

<div class="couplistMeta"> 
    <a class='view' rel="viewinfo" href="#">View Coupon</a> 
    <a class="print" href="#">Print</a> 
</div> 
<div class="info"> 
    <p><?php echo $rec2[4]."&nbsp;&nbsp;--&nbsp;&nbsp;Phone:&nbsp;&nbsp;".$rec2['phone']; ?></p><p><?php echo $rec2['address']."&nbsp;&nbsp;--&nbsp;&nbsp;".$rec2['city'].",&nbsp;".$rec2['state']."&nbsp;".$rec2['zip']; ?></p> 
</div> 

這裏是JavaScript

$(document).ready(function() { 
    $('div.info').hide(); 
    $("a[rel='viewinfo']").click(function() { 
      $('div.info').slideToggle(400); 
      return false; 
    }); 
}); 

我嘗試使用$(this).next('div.info').slideToggle(400);但這恰恰打破了效果。所以$('div.info')太籠統了，我怎麼能更具體的與JS？

Answer 1

試試這個：

$(document).ready(function() { 
    $('div.info').hide(); 
    $("a[rel='viewinfo']").click(function() { 
     $(this).parent().next('.info').slideToggle(400); 
     return false; 
    }); 
}); 

問題是由於$('div.info')隱含遍歷所有div元素與頁面上的類info。