使用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相同的li中包含的a。
• 使用.find("ul")查找ul元素内的li元素。

---

$('.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

在您的代码中this指的是使用jQuery 找到的锚点。在它下面你没有UL＆gt; 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');