jquery - 使用 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');
});​

小提琴