jQuery SlideToggle 嵌套 ul li

Question

我最初可以正常工作，但通过 W3C 验证器运行它，修复了错误，现在它无法正常工作。

我设置了 jsfiddle

本质上，它是一堆嵌套的 ul 被用作下拉菜单，挑出标题，当单独单击时，会显示嵌套 ul 中包含的信息。

但是由于将 ul 正确嵌套在 li 内部，因此无法正常工作，因此尝试了像 Children/siblings/next 这样的选择器 - 一切都无济于事。这并不是说它们不起作用，只是我不够了解，无法让它们起作用(显然!)。

此代码使所有列表同时滑动切换，但我想单独控制它们。

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

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

我确信使用类似的东西:

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

应该可以，但我一生都无法正确地弄清楚。我猜这是因为它是嵌套的，而且我没有正确定位它，但我的知识和截止日期都是有限的。

如何相应地定位适当的 ul？想知道是否有人可以帮助阐明并帮助我理解为什么这不起作用？

Answer 1

试试这个:

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

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

您只需要以正确的方式在 DOM 中移动。您想要移动到下一个 li (.next("li"))，然后移动到它的子节点之一 (.children('ul.featureListings'))并在那里触发slideToggle。