javascript - jQueryで子ULをターゲットにする

Question

私のページには、各LI内のリストを含む順序付けられていないリストがあります。

現在、これらはすべて何も表示しないように設定されていますが、[Id]をクリックして表示設定を切り替えます。

私は次のように書いただけですが、私はそれをうまく機能させることができないようです、誰かがどこで間違っているのか考えていますか？

//Product range expander
$('.product-range ul li a').click(function() {
  $(this).find('.product-range ul li ul').slideDown('slow');
  //$('.product-range ul li a').next('ul').toggle();
  return false;
});

Answer 1

• $(this)クリックされた要素（つまり、アンカー要素）を選択するために使用します。
• .parents("li")アンカーの最初に一致する親を見つけるために使用します。これは、と同じにul含まれているを見つけることができるようにするためです。lia
• 要素内にある要素.find("ul")を見つけるために使用します。ulli

---

$('.product-range ul li a').click(function() {
  $(this).parents("li").find("ul").slideDown('slow')
  return false;
});

---

または、次を使用できますsiblings。

$('.product-range ul li a').click(function() {
  $(this).siblings("ul").slideDown('slow')
  return false;
});

ただし、マークアップが変更された場合に備えて、相互の親を見つけてから要素を見つけることを好みます。

Answer 2

あなたのコードでは、 jQuery で見つかったアンカーthisを参照します。その下には、UL > LI 構造はないと思います。正しい要素を見つけるには、次のように変更します。

//Product range expander
$('.product-range ul li a').click(function() {
    $('.product-range ul li ul').slideDown('slow');
    return false;
});

Answer 3

 $(this).find('ul').slideDown('slow');

ネストされたリストを表示するのに十分なはずです。

Answer 4

これを試してください。

$(this).children().find('ul').slideDown('slow');