使用切换来点击和元素并显示/隐藏它下面的元素？

Question

我有以下结构：

我想通过单击上面的另一个（条形图）来显示和隐藏ul.children。

它应该只显示/隐藏下面的那个，因为页面中充满了具有相同结构的无序列表。

所以我被困在这里：

$('#wpbdp-categories > .wpbdp-categories > li.cat-item > a').click(function() {
  ???
}); 

有什么建议吗？

Answer 1

$('#wpbdp-categories > .wpbdp-categories > li.cat-item > a').click(function() {
  $(this).siblings("ul.children").toggle();
}); 

我认为应该工作

Answer 2

尝试使用.next()

e.g。

$(this).next('.children').toggle();

Answer 3

$('#wpbdp-categories > .wpbdp-categories > li.cat-item > a').toggle(
    function() { $(this).next().show() },
    function() { $(this).next().hide() }
);

最简单的方法..

修改

.toggle()处理click事件，因此您无需为其定义click事件。

http://api.jquery.com/toggle-event/

  

.toggle（）方法绑定click事件的处理程序，因此规则   此处也列出了触发点击申请的概述。