使用/ jquery显示/隐藏同一页面上多个元素中的一个元素

Question

我有一个页面，我在各种

上有几个不同的子导航元素

我的加价是（基本上）

<div class="sub-nav">
 <div class="sub-nav-btn"></div>
  <ul>
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn"></div>
  <ul>
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn"></div>
  <ul>
  </ul>
</div>

我当前的jquery是

$('.sub-nav ul').css("display","none");
$('.sub-nav-btn').click(function(){
$('.sub-nav ul').toggle();
return false;
});

目前这有效，但会打开所有相关的元素。如何使jquery工作，因此它只调用相关元素，而不是所有

Answer 1

HIya 演示 http://jsfiddle.net/4aMwA/ 或更有组织的小提琴：http://jsfiddle.net/s2CtY/

slideToggle http://api.jquery.com/slideToggle/

所以这项工作的方式是我为演示提供了一些示例文本**点击foo，你会看到它ul，如果你点击fp，你会看到它ul向下滑动等等。

jquery代码

  $(document).ready(function () {

 $('.sub-nav ul').css("display","none");
    // Watch for clicks on the "slide" link.
    $('.sub-nav-btn').click(function () {
        $(this).next(".sub-nav ul").slideToggle(400);
        return false;
    });


});​

Answer 2

$('.sub-nav ul').hide();
$('.sub-nav-btn').click(function(){
    $(this).siblings('ul').toggle('slow');
});​

FIDDLE