0

我的页面上有一个无序列表，其中包含每个 LI 中的列表。

目前它们都设置为不显示，但单击时我想切换显示设置。

我只写了以下内容，但我似乎无法让它工作，有人知道我哪里出错了吗？

//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;
});
4

4 回答 4

3
  • 用于$(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;
});

但是我更喜欢找到共同的父级，然后找到元素，以防标记发生变化。

于 2012-09-20T10:29:33.210 回答
1

在您的代码this中指的是使用 jQuery 找到的锚点。在它下面你没有我假设的 UL > LI 结构。为了找到正确的元素，将其更改为：

//Product range expander
$('.product-range ul li a').click(function() {
    $('.product-range ul li ul').slideDown('slow');
    return false;
});
于 2012-09-20T10:30:22.043 回答
0 
 $(this).find('ul').slideDown('slow');

应该足以显示嵌套列表。

于 2012-09-20T10:29:03.987 回答
0

请试试这个。

$(this).children().find('ul').slideDown('slow');
于 2012-09-20T10:34:25.433 回答