jquery - jQuery slideToggle ネストされた ul li

Question

これはもともと機能していましたが、W3C バリデーターを実行してエラーを修正したところ、機能しなくなりました。

基本的には、ネストされた ul の束がドロップダウンとして使用され、個々にクリックすると、ネストされた ul に含まれる情報が表示される見出しが選択されます。

しかし、li の内部に ul を適切にネストすると、これは機能しません。children/siblings/next などのセレクターを試してみましたが、すべて役に立ちませんでした。それらが機能しないと言っているわけではありませんが、機能するほど十分に理解していないだけです（明らかに！）。

このコードは、すべてのリストを一度にスライドさせますが、個別に制御したいです。

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $('ul.featureListings').slideToggle(300);
    return false;
  });
});

次のようなものを使用していると確信しています：

$(this).next('.featureListings').slideToggle(300);

うまくいくはずですが、私の人生ではそれを適切に理解することはできません。入れ子になっていて、適切にターゲットを絞っていないためだと思いますが、締め切りと同様に知識が限られています。

それに応じて適切なULをターゲットにするにはどうすればよいですか? 誰かが光を当てて、なぜこれが機能しないのかを理解するのを手伝ってくれるかどうか疑問に思っていますか?

score 3 · Accepted Answer

これを試して：

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $(this).next("li").children('ul.featureListings').slideToggle(300);
    return false;
  });
});

正しい方法でDOMを移動する必要があります。次のli（.next（ "li"））に移動し、次にその子の1つ（.children（'ul.featureListings'））に移動して、slideToggleをトリガーします。そこの。

score 1 · Accepted Answer

私が理解したことは何でもjsfiddleを作成しました。おもう。slideToggle現在のオープン時に次と前のクローズが必要です。私はhtmlページにも変更を加えました。

 $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
      $('ul.featureListings').not($(this).children('ul.featureListings')).slideUp();
    $(this).children('ul.featureListings').slideToggle(300);
    return false;
  });

score 0 · Accepted Answer

使用する.next()

$(this).next().find('ul.featureListings').slideToggle(300);

デモはこちらhttp://jsfiddle.net/heE6J/4/

score 0 · Accepted Answer


$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $('ul.featureListings', $(this).next()).slideToggle(300);
    return false;
  });
});

jquery - jQuery slideToggle ネストされた ul li

4 に答える 4

Related

Reference