jquery - トグルを使用してクリックして要素を表示し、そのすぐ下の要素を非表示にしますか?

Question

私は次の構造を持っています：

ul.children上記のような別のもの（Bars）をクリックして、表示と非表示を切り替えたいと思います。

ページは同じ構造の順序付けられていないリストでいっぱいであるため、以下のもののみを表示/非表示にする必要があります。

だから私はここで立ち往生しています：

$('#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();