jquery - 使用切换来单击和元素并显示/隐藏其正下方的元素？

Question

我有以下结构：

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

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

所以我被困在这里：

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

有什么建议么？

Answer 1

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

最简单的方法..

编辑：

.toggle()处理点击事件，所以你不需要为它定义点击事件。

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

.toggle() 方法为点击事件绑定了一个处理程序，因此这里也适用于触发点击的规则。

Answer 2

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

我认为应该工作

Answer 3

尝试使用.next()

例如

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