显示/隐藏同一页w/ jquery的多个元素中的一个。

I've got a page where I'm having several different sub-nav elements on it on various

我有一个页面，里面有几个不同的子导航元素。

My mark-up is (basically)

我的标记(基本上)

<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>

my current jquery is

我现在的jquery是

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

currently this works but opens all of the relevant elements called. How do I get the jquery working so it only calls the relevant element and not all

目前，这一工作只是打开了所有相关的元素。我如何让jquery工作，所以它只调用相关元素，而不是全部?

2 个解决方案

#1

HIya demo http://jsfiddle.net/4aMwA/ or more organized fiddle here: http://jsfiddle.net/s2CtY/

HIya demo http://jsfiddle.net/4aMwA/或更有组织的小提琴:http://jsfiddle.net/s2CtY/。

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

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

So the way this work is I have put some sample text for demo ** click on foo and you will see its ul and if you click on fp you will see its ul sliding down so on and so forth.

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

jquery code

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;
    });


});​

#2

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

FIDDLE

小提琴