jQuery只切换一个元素，而不必使用ID

Question

我有我的网页上具有相同类的多个div。我希望能够单独切换它们。使用这个脚本：

$(document).ready(function() { 
    $('.file').hide(); 

    $('a.toggle').click(function() { 
     $('.file').slideToggle(1000); 
     $(this).text($(this).text() == 'show' ? 'hide' : 'show'); 
     return false; 
    }); 
}); 

的HTML看起来像这样：

<div class="file-wrapper"> 
<h5>(<a href="#" class="toggle">show</a>)</h5> 
    <div class="file"> 
    <?php require "lipsum.php"; ?> 
    </div><!-- .file --> 
</div><!-- .file-wrapper --> 

<div class="file-wrapper"> 
<h5>(<a href="#" class="toggle">show</a>)</h5> 
    <div class="file"> 
    <?php require "lipsum.php"; ?> 
    </div><!-- .file --> 
</div><!-- .file-wrapper --> 

现在，如果我单击的链接它会触发网页上同时申报单（页面最终将有多达10个可切换divs。我知道我可以给每个div添加ID，但是我不想为每个id编写一次jquery脚本。

我对jquery相当新，所以我确定有一个简单的方法来做到这一点。我已经尝试使用.closest（'div'）但是这也不起作用。

任何帮助？

Answer 1

也许你可以试试这个：

$(this).parent('h5').next('div.file').slideToggle(1000); 

编辑：下面是一个例子：http://jsfiddle.net/6GRJr/

Answer 2

，这是因为它总是隐藏所有你的div class文件 做这样的

 
$(document).ready(function() { 
    $('.file').hide(); 

    $('a.toggle').click(function() { 
     $('div.file', this.parentNode).slideToggle(1000); 
     $(this).text($(this).text() == 'show' ? 'hide' : 'show'); 
     return false; 
    }); 
});